有时候我们可能需要在{{}}里进行一些计算在展示出来数据 例如：在页面中展示学生的成绩、总分和平均分：
<div id="app"> <table border="1"> <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> new Vue({ el:'#app', data:{ Math:88, English:77, chemistry:99, } })以上是通过在{{}}里运算，得出总分和平均分。 虽然也能解决问题，但是特别不清晰，特别是当运算比较复杂的时候 那怎么办呢？ 了解一点的，应该会想到methods， 没错，确实methods也可以！ 但事实上，vue给我们提供了一个特别好的解决方案叫：计算属性 计算属性是vue实例中的一个配置选项：computed 通常里面都是一个个计算相关的函数，返回最后计算出来的值。 即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算。
<div class="app"> <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="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); } } });如上，计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。而如果写在methods里，数据根本没有缓存的概念，所以每次都会重新计算。这也是为什么这里我们没用methods的原因。
作者：jCodeLife 链接：https://www.jianshu.com/p/350c8af3ac28
