背景

有时候我们可能需要在{{}}里进行一些计算再展示出来数据：

<div>
    <table>
        <thead>
            <th>学科</th>
            <th>分数</th>
        </thead>
        <tbody>
            <tr>
                <td>数学</td>
                <td><input type="text" v-model="Math"></td>
            </tr>
            <tr>
                <td>英语</td>
                <td><input type="text" v-model="English"></td>
            </tr>
            <tr>
                <td>化学</td>
                <td><input type="text" v-model="chemistry"></td>
            </tr>
            <tr>
                <td>总分</td>
                <td>{{Math + English + chemistry}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{(Math + English + chemistry)/3}}</td>
            </tr>
        </tbody>
    </table>
</div>

var app = new Vue({
    el:'.app',
    data:{
        Math:88,
        English:77,
        chemistry:99,
    }
});

虽然能解决问题，但是代码显得比较混乱。计算的数据少还好，一旦多的话会使代码的可读性和维护性变得非常差。
这种情况下，Vue给我们提供了一个特别好的解决方案：计算属性。

计算属性

我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算就可以了。
计算属性是Vue 实例中的选项：computed。
通常里面每一个都是计算相关函数，返回最后计算出来的值。

<div>
    <table>
        <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="chemistry"></td>
            </tr>
            <tr>
                <td>总分</td>
                <td>{{sum}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{average}}</td>
            </tr>
        </tbody>
    </table>
</div>

var vm = new Vue({
    el:'.app',
    data:{
        Math:88,
        English: 77,
        chemistry:99,
    },
    computed:{
        sum:function() {
            return this.Math+ this.English+this.chemistry;
        },
        average:function() {
            return Math.round(this.sum/3);
        }
    }
});