计算属性与监视方法

计算属性 -- computed

计算属性,顾名思义是可以计算数据的属性,为什么要特意出个计算属性呢,因为vue如果直接将两个数据加起来的话,使用加法计负数的算双向绑定数据时就会出现问题
计算属性用法 -- computed
代码案例:加法计算器
  • 首先计算器我们想要用户输入所以建立两个双向绑定的变量数据
  • computed属性中让函数的返回的结果赋予变量数据c
  • 返回语句显示转换将两个双向绑定的数据转为Number型计算后将值返回
html部分:<input type="text" v-model="a">+<input type="text" v-model="b">={{c}}js部分:new Vue({    el:'body',    data:{        a:"",        b:"",    },    computed:{        c:function(){            return Number(this.a)+Number(this.b);        }    }})  

监视方法 -- $watch

代码案例:加法计算器
  • $watch 方法是当监听的变量产生变化时会运行它的处理函数
  • 这个方法是Vue 实例的方法,所以创建一个变量a 来储存创建储存了想要监听的数据的Vue实例,在Vue实例后面接这个方法也是可以的。
html部分:<input type="text" v-model="a">+<input type="text" v-model="b">={{c}}js部分:var a = new Vue({    el:'body',    data:{        a:'',        b:'',        c:''    }})a.$watch('a',function(){    a.c=Number(a.a)+Number(a.b);});a.$watch('b',function(){    a.c=Number(a.a)+Number(a.b);})