computed set get

作者: 知识分享share | 来源:发表于2018-04-01 21:06 被阅读0次

<!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>