Vue.js - 计算属性

 computed

      计算属性本质上就是一个 function 函数，它可以实时监听data 中数据的变化，并 return 一个计算后的新值，  供组件渲染 DOM 时使用。 

      计算属性指的是通过一系列运算之后，最终得到一个属性值。

特点：

1. 定义的时候，要被定义为“方法”

2. 在使用计算属性的时候，当普通的属性使用即可

computed: {
        // rgb 作为一个计算属性,被定义成了方法格式
        rgb() {
          return rgb
        }
      }

所有的计算属性,都要定义到 computed 节点下。

好处：

1. 实现了代码的复用

2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！

使用

        当想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，都应当使用计算属性，

      使用 computed 计算属性定义计算方法,动态计算出来的属性值可以被模板结构或 methods 方法使用

注意： 计算属性中必须有 return 返回值！ 

模板：

 computed: {
        计算属性名() {
            return ...
        }
    }

 

计算属性实例

1、准备盒子以及样式

<div id="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 盒子 -->
    <div class="box" :style="{ backgroundColor: rgb }">
      {{ rgb }}
    </div>
    <button @click="show">按钮</button>
  </div>

  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
    }
  </style>

2、编写vue

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        // 红色
        r: 0,
        // 绿色
        g: 0,
        // 蓝色
        b: 0
      },
      methods: {
        // 点击按钮，在终端显示最新的颜色
        show() {
          console.log(this.rgb)
        }
      },
      // 所有的计算属性,都要定义到 computed 节点下
      // 计算属性在定义的时候,要定义成 “方法格式”
      computed: {
        // rgb 作为一个计算属性,被定义成了方法格式
        // 最终,在这个方法中,要返回一个生成好的 rgb(x,x,x) 的字符串
        rgb() {
          return `rgb(${this.r},${this.g},${this.b})`
        }
      }
    });
  </script>

效果图：

 

总结：

1. 所有的计算属性,都要定义到 computed 节点下；

2. 计算属性在定义的时候,要定义成 “方法格式”；

3. 在使用计算属性的时候，当普通的属性使用即可；