vue里computed的get和set

Posted 2021-01-29 dangdanghepingping

computed里的对象有get和set方法。

get是当该对象所依赖的变量发生变化是执行，重新returncomputed结果。

set是该对象的值变化时会执行，并且将变化的结果作为参数传进set里。然后可以根据传进的值来处理

    <div id="app">
        <p>price: <input type="text" v-model=‘price‘>{{price}}</p>
        <p>mount: <input type="text" v-model=‘mount‘></p>
        <p>toltal: {{calculate}} </p>
        <button v-on:click=‘change‘>changePrice</button>//当改变了calculate的值得时候，会执行calculate的set方法，且传入参数

    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                price: 0,
                mount: 0,

            },
          methods:{
           change:function(){
               this.calculate = 100;
           }
           
          },
          computed:{
            calculate:{//这个calculate不能是函数而是对象了。
                get: function(){
                    alert(‘get执行了‘)//页面渲染时会执行一次get来获取calculate的值
                    return this.price * this.mount
                },
                set:function(value){
                    alert(‘set执行了‘);
                    this.price = 10;
                    this.mount = 10
                }
            }
          }
        })