1.什么是计算属性
计算属性指的是通过一系列运算之后,最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下:
var vm = new Vue({
el:'#app'
data: {
r:0,
g:0,
b:0
},
computed: {
rgb() { return `rgb(${this.r}, ${this.g}, ${this.b})` }
},
methods: {
show() { console.log(this.rgb) }
},
})
案例:
效果演示:
计算属性的特点:
特点:
- 定义的时候,要被定义为“方法”
- 在使用计算属性的时候,当普通的属性使用即可
好处:
- 实现了代码的复用
- 只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值!