Vue-计算属性

Vue-计算属性

• 计算属性

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

  <!-- 专门用户呈现颜色的 div 盒子 -->
  <!-- 在属性身上，: 代表  v-bind: 属性绑定 -->
  <!-- :style 代表动态绑定一个样式对象，它的值是一个 {  } 样式对象 -->
  <!-- 当前的样式对象中，只包含 backgroundColor 背景颜色 -->
  <div class="box" :style="{ backgroundColor: rgb }">
      {{ rgb }}
  </div>
  
  data: {
      // 红色
      r: 0,
      // 绿色
      g: 0,
      // 蓝色
      b: 0
  },
  // 所有的计算属性，都要定义到 computed 节点之下
  // 计算属性在定义的时候，要定义成“方法格式”
  computed: {
      // rgb 作为一个计算属性，被定义成了方法格式，
      // 最终，在这个方法中，要返回一个生成好的 rgb(x,x,x) 的字符串
      rgb(){
      	return `rgb(${this.r}, ${this.g}, ${this.b})`
      }
  }
  

• 计算属性的特点

  • 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性；
  • 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算。