4. Vue计算属性

目录

一、什么是计算属性？

二、计算属性的使用？

---

一、什么是计算属性？

计算属性：通过一系列运算之后，最终的到的一个属性值。这个动态计算出来的属性值可以被模板结构【v-bind、插值表达式】或者methods方法使用。

二、计算属性的使用？

 <div :style="{backgroundColor: rgb}">{{ rgb }}</div>

 var vm = new Vue({

            el: "#app",

            data: {

                r: 0,

                g: 0,

                b: 0

            },

            // 所有的计算属性都写在computed 节点

            // 计算属性在定义的时候，要定义成方法

            computed: {

                // 最终在这个方法中，返回一个生成好的字符串属性，属性可以直接被使用

                rgb() {

                    return `rgb(${this.r}, ${this.g}, ${this.b})`

                }

            }

        })

        console.log(vm);

计算属性的特点：

在定义的时候要定义成方法，但是在使用的时候当作普通属性使用即可 。

好处：

1）实现了代码的复用

2）计算属性中依赖的数据源发生改变，则计算属性也会随之重新求值