什么是Vue中的计算属性
计算属性故名思意,是具有计算表达式的一个属性,或者说是一个值。
在Vue中,我们有时会在模板中对数据进行一些逻辑处理。这个时候就非常的不好看,也难以维护。比如像下面的代码:
<div id=“app”>
{{ message.split('').reverse().join('') }}
</div>
这里我们像在渲染message时,将其反转,并不是简单的将数据渲染上去。
又或者是这种情况
<span>{{ books.length > 0 ? 'Yes' : 'No' }}</span>
这里我们不是想直接渲染数据,而是将根据数据,渲染其他结果选项。
类似这类,用计算表达式表示结果的情况,Vue用计算属性来处理替换,提高代码的可读性和维护性
Vue中如何使用计算属性
例如,我们想要获取到一串字符串的翻转字符串,我们可以利用计算属性来做
原来基础的写法:
<div id=“app”>
{{ message.split('').reverse().join('') }}
</div>
const vm = new Vue({
el: '#app',
data: {
message: 'Hello'
}
计算属性写法:
<div id="app">
<!-- 计算属性的值可以像data数据一样,直接被使用 -->
{{ reversedMsg}}
</div>
const vm = new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMsg: function () {
return this.message.split('').reverse().join('');
}
}
})
怎么样,是不是很好理解,值得注意的是,其中,计算属性 reversedMsg,是一个方法,在message数据改变时,reversedMsg会自动调用,从而同步对页面上的数据进行更新
深入计算属性
另外,计算属性除了写成一个函数之外,还可以写成一个对象,对象内有两个属性,getter&setter,这两个属性皆为函数,写法如下:
const vm = new Vue({
el: '#app',
data: {
message: 'Hello',
firstStr: ''
},
computed: {
reversedMsg: {
getter () {
return this.message.split('').reverse().join('');
},
setter (newVal) {
this.firstStr = newVal[0];
}
}
}
})
当我们去获取某一个计算属性时,就会执行getter函数,
setter函数是可选的,setter函数在给计算属性重新赋值时会执行。 参数:要被重新设置的值。