共计 738 个字符,预计需要花费 2 分钟才能阅读完成。
计算属性与监视方法
计算属性 — 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);
})
正文完
发表至: javascript
2019-07-05