computed set get

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">
    </script>
    <style>
    </style>
</head>
<body>
<h1>多个实例</h1>
    <div id="app-one">
      <p>价格:<input type="text" v-model="price"></p>
      <p>数量:<input type="text" v-model="num"></p>
      <p>总结:{{computedsum}}</p>
      <p>总结:{{sum}}</p>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el: "#app-one",
        data:{
            price:0,
            num:0,
            sum:0
        },
        methods:{
     
        },
        computed:{
          //   computedsum(){
          //       return this.num*this.price;
          // }
          computedsum:{
            set:function(value){
                console.log(value);
            },
            get:function(){
                return this.num*this.price;
            }
          }    
        },
        // watch:{
        //     price:function(){
        //         // console.log("price change")
        //         this.sum = this.price*this.num;
        //     },
        //     num:function(){
        //         // console.log("num change")
        //         this.sum = this.price*this.num;
        //     }
        // }
     
    });
</script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容