Vue学习——计算属性（17）

引入

计算属性指通过一系列运算之后，最终得到一个属性值
这个动态计算出来的属性值可以被模板结构或methods方法使用

v-model进行双向绑定实现监听输入（即在开发者选项内能实时同步输入）
.number则是将输入的字符串全部转化为数字（这里是rgb需要）

然后写一个box颜色的计算公式，也就是利用v-bind将输入实时显示在文字上（v-bind后面被vue认为是javascript）其中，${}是动态生成的写法

计算属性

此时我们发现rgb函数（或插值生成）被调用了三次！如果我们需要修改，就会变得非常麻烦，因此，诞生了“计算属性”这一说

所有的计算属性的语法要定义到computed节点下
计算属性在定义时要定义成方法格式
所以我们的思路很清晰：将繁琐冗余的方法全部统一成一个方法，然后应用到body里即可

这里rgb即为计算rgb的方法名，将其直接套用在上面几个地方即可，最终返回一个生成好的rgb字符串rgb(x,y,z)

特点

1.定义的时候，要被定义为“方法”
2.在使用计算属性的时候，当普通的属性使用即可

好处

实现了代码的复用
只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值