04.vue计算属性-computed

一.什么是计算属性

        计算属性指的是通过一系列的运算之后,得到的一个属性值;

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

二.计算属性的使用

实现一个根据输入的r,g,b值

颜色自动进行变化的demo

var vm = new Vue({
    el: '#app ',
    data: {
    r: 0，g: 0, b: 0
    },
    computed: {
        rgb() { return 'rgb(${this.r}， ${this.g}，${this.b})`}
        },
    methods: {
    show() { 
        console.log(this.rgb)
      }
    },
})

三.计算属性的特性

特点:

1. 定义的时候,要被定义为"方法"
2. 使用计算属性的时候,当作普通的属性使用即可

优点:

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