vue2.0--计算属性

Posted 2021-10-07 codejing

什么是计算属性？

计算属性是指通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模版结构或methods方法使用。

计算属性的好处：

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

计算属性的特点：

 计算属性以方法的格式定义到与data同层级的computed节点之下，在使用的时候以属性的形式被绑定到v-bind指令中。

示例代码：（实现了代码复用，根据输入的值动态改变元素的背景颜色）

//CSS   

 <style>
        .bgc{
            width: 100px;
            height: 100px;
            border:1px solid #000000;
           margin:10px;
        }
    </style>

//html

<div id = app>
    r:<input type="text" v-model="r"><br>
    g:<input type="text" v-model="g"><br>
    b:<input type="text" v-model="b"><br>
    <div class="bgc" :style="{backgroundColor:rgb}">{{rgb}}</div>
</div>

//JS

<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>