计算属性
计算属性,定义为“方法”,定义到 computed 节点之下
在使用计算属性的时候,当普通的属性使用即可,不需要 “()”
好处:
1. 实现了代码的复用
2. 只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值!
例:设定一个有大小的盒子,修改输入框中的rgb,会使得盒子跟着一起变色。
①未使用计算属性
style
.box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
template
<div class="app">
<!-- 数字部分 -->
<div>
<span>R:</span>
<input type="text" v-model.number="r">
</div>
<div>
<span>G:</span>
<input type="text" v-model.number="g">
</div>
<div>
<span>B:</span>
<input type="text" v-model.number="b">
</div>
<hr>
<!-- 图块 -->
<div class="box" :style="{ backgroundColor: `rgb(${this.r}, ${this.g}, ${this.b})`}">
<p>这里的RGB值是:{{ `rgb(${this.r}, ${this.g}, ${this.b})`}}</p>
<button @click="show">单击按钮,在终端打印RGB的值</button>
</div>
</div>
script
data: {
r: 10,
g: 111,
b: 44
},
methods: {
// 点击按钮,在终端显示
show() {
// 以下两行等效,
// console.log(this.rgb)
console.log(`rgb(${this.r}, ${this.g}, ${this.b})`)
}
}
②改进为计算属性:
template更改
<!-- 图块 -->
<div class="box" :style="{ backgroundColor: rgb }">
<p>这里的RGB值是:{{ rgb }}</p>
</div>
script增加
computed: {
rgb() {
return `rgb(${this.r}, ${this.g}, ${this.b})`
}
}
很明显,使用计算属性后,大段的rgb(${this.r}, ${this.g}, ${this.b}
变成了this.rgb
,代码变得高效复用