由于模板的最初设计是用于简单运算的,当在模板内容中放入过多的逻辑,将导致模板过重且难以维护,因此引入了计算属性。在Vue中的计算属性由computed来提供,通过访问属性调用getter来返回值。
代码一:
<div id="app">
<p>{{message.split('').reverse().join('')}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Love blog'
}
})
</script>
结果: ‘golb evoL’
代码二:
<div id="example">
<p>message: "{{ message }}"</p>
<p>reversedmessage: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Love blog '
},
computed: {
// 计算属性 getter,我们亦可以提供一个setter
reversedMessage:{
get:function () {
// `this` 指向当前vm实例
return this.message.split('').reverse().join('')
}
// set:function(val){
// this.message = val:
// }
}
}
})
结果:
message: 'Love blog'
reversedMessage: 'golb evoL'
上面两段代码实现的效果相同,但计算属性可以处理更复杂的业务逻辑,解决相对复杂的问题,计算属性可以访问data中所有属性,使用其他方法也可以实现上述转换字符串的功能,但由计算属性来实现更为容易。
在计算属性的使用时,我们需要声明并且提供函数作为属性的getter函数,在必要时也可以提供一个setter,在运行时setter函数也将被调用,改变掉相应的内容。并且计算属性在多数情况下皆适用。