计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时,就会更加难以处理。
所以,对于任何复杂逻辑,你都应当使用计算属性。
<div id="app">
{{ReverseMsg}}
<div>
var vm = new Vue({
el:"#app",
data:{
msg:'Hello'
},
computed:{
ReverseMsg:function(){
return this.msg.split('').reverse().join('');
}
//ReverseMsg中的内容是通过function函数计算所得出
}
});
其中ReverseMsg函数中的结果是根据msg的内容来进行计算所得
<div id="app">
{{ReverseMsg}}
<input v-model="msg"/>
</div>
var vm = new Vue({
el:"#app",
data:{
msg:'Hello'
},
computed:{
ReverseMsg:function(){
return this.msg.split('').reverse().join('');
}
}
});
getter与setter函数
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello'
},
computed:{
ReverseMsg:{
get:function(){//getter函数
console.log("abc")
},
}
}
});
console.log(vm.ReverseMsg);
打印结果:
以下概念摘自vue官网:
你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage
依赖于 vm.message
,因此当 vm.message
发生改变时,所有依赖 vm.reversedMessage
的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系:计算属性的 getter
函数是没有副作用 (side effect) 的,这使它更易于测试和理解。
你可以打开浏览器的控制台,自行修改例子中的 vm。vm.reversedMessage
的值始终取决于 vm.message
的值。
计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:
setter函数用于赋值
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello'
},
computed:{
ReverseMsg:{
get:function(){//getter函数
return this.msg.split('').reverse().join('');
},
set:function(newValue){//setter 函数
this.msg=newValue.split('').reverse().join('');
//这里是将新设置的值赋值给msg
}
}
}
});
console.log(vm.ReverseMsg);
在页面中执行vm.ReverseMsg="123456789"
,默认执行set函数。