计算属性

“我做事，但求问心无愧！”

——苗条俊

计算属性：写在computed对象中的属性，本质上是一个方法计算属性，不过使用时依旧当属性来使用

特点：

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

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

好处：

1. 实现了代码的复用

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

<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>
                    <div class="box" :style="{ backgroundColor: rgb }">      {{ rgb }}    </div>  </div>
  <script>    var vm = new Vue({      el: '#app',      data: {        // 红色        r: 0,        // 绿色        g: 0,        // 蓝色        b: 0      },            // 所有的计算属性，都要定义到 computed 节点之下      // 计算属性在定义的时候，要定义成“方法格式”      computed: {        // rgb 作为一个计算属性，被定义成了方法格式，        // 最终，在这个方法中，要返回一个生成好的 rgb(x,x,x) 的字符串        rgb() {          return `rgb(${this.r}, ${this.g}, ${this.b})`        }      }    });</script>

这段代码是一个基于Vue框架的RGB颜色选择器，通过三个input输入框来分别输入R、G、B的值，同时定义了一个计算属性rgb()，用来计算并返回这三个值组成的颜色字符串，最终渲染在一个具有背景色的div盒子中。

其中el:’#app’指定了绑定的DOM元素为id属性为app的元素。data对象用来定义数据属性，包含了三个属性：R、G、B的值都被初始化为0。

然后定义了一个计算属性rgb()，这个计算属性实际上是一个方法，它返回一个rgb字符串，其中this.r、this.g、this.b分别表示当前组件实例的R、G、B属性的值。这样，每次输入R、G、B值时，计算属性会重新计算并返回颜色字符串。在最后的div盒子中，动态绑定了backgroundColor属性，使得背景色始终等于计算属性返回的rgb字符串。最后，在输入框中通过v-model.number指令实现了双向数据绑定计算属性，确保了输入框的值与属性值保持同步。

限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688

htebazile永久VIP

收藏 海报 链接