有时候我们可能需要在{{}}里进行一些计算在展示出来数据
例如:在页面中展示学生的成绩、总分和平均分:
<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