vue 计算属性 computed

computed：计算属性，通过一系列运算之后，最终得到一个属性值

这个动态计算出来的属性值可被模板结构（插值、v-bind）或methods方法使用

特点：

• 定义时，定义成方法的形式
• 使用计算属性时，当普通属性使用即可

优点：

• 实现了代码的复用
• 只要计算属性依赖的数据源变化了，则计算属性会重新计算结果

// 示例
<div class="box" :style="rgb"></div>
<p>{{rgb}}</p>
<button @click="getRgb">按钮</button>

computed:{
    // rgba 计算属性  方法格式
    rgb(){
      return `rgb(${this.r}, ${this.g}, ${this.b})`
    }
}
methods:{
    getRgb(){
      console.log(this.rgb);
    }
}