首页 Vue

# 计算属性

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

这个动态计算出来的属性值可以被模板结构或 methods 方法使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
<div id="app">
    <input type="text" name="r" v-model="r"><br>
    <input type="text" name="g" v-model="g"><br>
    <input type="text" name="b" v-model="b"><br>
    <div :style="{backgroundColor: `rgb`}">
        {{rgb}}
    </div>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            r: 0,
            g: 0,
            b: 0
        },
        computed: {
            rgb() {
                return `rgb(${this.r},${this.g},${this.b})`
            }
        }
    })
</script>
</body>

特点 :

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

好处 :

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