Vue——计算属性

概念

其实就是在标签调用变量，在computed里面定义函数进行相应运算。

计算属性只有在它的相关依赖数据发生改变时才会重新求值。所以，性能较好。

实例

假设我们需要求出总分和平均分。

<table border="1">
    <thead>
        <th>学科</th>
        <th>分数</th>
    </thead>
    <tbody>
        <tr>
            <td>数学</td>
            <td><input type="text" v-model.number="math"></td>
        </tr>
        <tr>
            <td>英语</td>
            <td><input type="text" v-model.number="english"></td>
        </tr>
        <tr>
            <td>音乐</td>
            <td><input type="text" v-model.number="music"></td>
        </tr>
        <tr>
            <td>总分</td>
            <td>{{sum}}</td>  //调用sum方法
        </tr>
        <tr>
            <td>平均分</td>
            <td>{{arv}}</td>
        </tr>
    </tbody>
 </table>

new Vue({
    el: '#app',
    data:{
      math: 90,
      english: 100,
      music: 50
    },
    computed:{
        //定义sum方法，记得使用return返回需要的值
        sum: function(){
            return this.math + this.english + this.music
        },
        arv: function(){
            //使用this.sum即可获得上面的值
            return Math.round(this.sum / 3)
        }
    }
})