computed
计算属性
对于任何复杂逻辑,你都应当使用计算属性
<div id="app">
//computed属性
<input v-model="price2" type="text" />
<div>
commputed----
{{add}}
</div>
//methods属性
<input v-model="price1" type="text" />
<div>
methods----{{add2()}}
</div>
<div @click="test">{{total}}</div>
</div>
new Vue({
el:'#app',
data:{
count:2,
price1:'',
price2:'',
total:0,
timer:0
},
//当computed里面的数据发生变化的时候,也会触发该函数
//因此我们通常不用此属性来定义需要频繁操作的数据的方法
methods:{
add2(){
console.log('methods')
return this.count*this.price1;
},
test(){
console.log('我是点击事件来触发的');
this.total = this.count*this.price1;
}
},
//computed属性只有当自身的数据发生变化时才会再次触发该函数
computed:{//计算属性
add(){
var num;
//函数的节流或防抖
//比如:做一个搜索功能,当用户输入文字的时候函数会一直执行,但我们是希望用户输入完成之后才执行函数,实现这种效果的方法,我们叫节流或防抖
clearTimeout(this.timer);
//箭头函数本身是没有this,但我们用到this的时候,他会找定义函数时所处环境的this
this.timer =setTimeout(()=>{
console.log(this)//vue的实例化对象
},1000)
return this.count*this.price2;
}
}
})
计算属性中的setter
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter
<div id="app">
<p>{{firstName}}---{{lastName}}---{{fullName}}</p>
</div>
var vm = new Vue({
el: "#app",
data: {
firstName: 'li',
lastName: "zongjian"
},
computed: {
fullName: {
get: function () {
//获取firstName和this.lastName的值
return this.firstName + ' ' + this.lastName;
},
set: function (newValue) {
//获取get中的返回值,并切割成数组
var names = newValue.split(' ');
console.log(names);//['fang','yuying']
//分别赋回
this.firstName = names[0];
this.lastName = names[1];
}
}
}
})
vm.fullName = "fang yuying"; //当fullName发生改变时,同时改变firstName和lastName的值;
网友评论