我们要写一个成绩表如下
| 数学 | 90 |
| 物理 | 80 |
| 英语 | 70 |
<div id="app"><table border="1"><tr><td>数学</td><td>{{ math }}</td></tr><tr><td>物理</td><td>{{ physics }}</td></tr><tr><td>英语</td><td>{{ english }}</td></tr></table></div>var app = new Vue({ ???????el : ‘#app‘, ???????data : { ???????????math : 90, ???????????physics : 80, ???????????english : 70, ???????} ???});接下来我们要添加总分和平均分，
<tr> ???????????????<td>总分</td> ???????????????<td>{{math + physics + english}}</td> ???????????</tr> ???????????<tr> ???????????????<td>平均分</td> ???????????????<td>{{ Math.round((math + physics + english)/3) }}</td> ???????????</tr>这时我们在td中加的东西很多，这样很不好，这时Vue提供了一个计算属性computed
为了方便观察我们同时将tr中的内容换成input来观察动态变化
<div id="app"> ???????<table border="1"> ???????????<tr> ???????????????<td>数学</td> ???????????????<td><input type="text" v-model="math"></td> ???????????</tr> ???????????<tr> ???????????????<td>物理</td> ???????????????<td><input type="text" v-model="physics"></td> ???????????</tr> ???????????<tr> ???????????????<td>英语</td> ???????????????<td><input type="text" v-model="english"></td> ???????????</tr> ???????????<tr> ???????????????<td>总分</td> ???????????????<td>{{ sum }}</td> ???????????</tr> ???????????<tr> ???????????????<td>平均分</td> ???????????????<td>{{ average }}</td> ???????????</tr> ???????</table> ???</div>var app = new Vue({ ???????el : ‘#app‘, ???????data : { ???????????math : 90, ???????????physics : 80, ???????????english : 70, ???????}, ???????computed : { ???????????sum : function(){ ???????????????return this.math + this.physics + this.english; ???????????}, ???????????average : function() { ???????????????return Math.round(this.sum/3); ???????????} ???????} ???});在app中加入computed 这时我们就可以动态的观察各科分数改变总分和平均分对应改变，但是由于input中输入内容会被自动转换成字符串类型，所以我们应该保证它是number类型，我们可以使用v-model的number修饰符，也可以在数据上进行处理，v-model上加修饰符就不说了，在computed中的sum对应的方法中给每个数据加一个parseFloat转换为number，
computed : { ???????????sum : function(){ ???????????????return parseFloat(this.math) + parseFloat(this.physics) + parseFloat(this.english); ???????????}, ???????????average : function() { ???????????????return Math.round(this.sum/3); ???????????} ???????}这时，改变各科成绩就可以看到总分平均分对应的改动了。
Vue.js 基础学习计算属性computed
原文地址：http://www.cnblogs.com/huzhuo/p/7469872.html