一、计算属性
1.1 使用计算属性的理由
模板内的表达式插值设计的初衷用于简单的逻辑表达,不宜在模板中的表达式放入太多的逻辑,否则会导致模板过于繁重且难以维护。所以在遇到复杂的逻辑时应该使用计算属性(Vue实例的computed
选项属性)。
<div id="app">
<p>原有信息: "{
{ message }}"</p>
<p>计算的反向信息: "{
{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#app',
data: {
message: '刘德华'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
//this 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
所有的计算属性都以函数的形式写在 Vue 实例内的computed
选项内,最终返回计算后的结果。
1.2 计算属性的用法实践
每一个计算属性都包含一个 getter
和一个 setter
。计算属性的默认用法,只是利用了 getter
来读取,在声明一个计算属性时,可以直接使用默认的写法。在需要时,也可以提供一个 setter
函数, 当手动修改计算属性的值时,就会触发 setter
函数,执行data
选项属性的赋值操作。
<div id="app">
实名: {
{ realName }} </br>
匿名: {
{ nickName }}
</div>
var vm = new Vue({
el: '#app',
data: {
rname: '张三',
nname: '战狼'
},
computed: {
realName: {
get: function() { // getter
return this.rname
},
set: function(newValue) { // setter