有時候我們可能需要在{{}}里添加一些需要計算再展示出來數(shù)據(jù)
例如：在頁面中展示學(xué)生的成績總分和平均分：
<div id="app">
<table border="1">
<thead>
<th>學(xué)科</th>
<th>分?jǐn)?shù)</th>
</thead>
<tbody>
<tr>
<td>數(shù)學(xué)</td>
<td><input type="text" v-model="Math"></td>
</tr>
<tr>
<td>英語</td>
<td><input type="text" v-model="English"></td>
</tr>
<tr>
<td>化學(xué)</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,
}
})
以上是通過在{{}}里運(yùn)算，得出總分和平均分
雖然也能解決問題嘴拢，但是特別不清晰滤港，特別是當(dāng)運(yùn)算比較復(fù)雜的時候
那怎么辦呢曲饱？
了解一點的灾前，應(yīng)該會想到methods防症，
沒錯，確實methods也可以哎甲！但事實上蔫敲，vue給我們提供了一個更好的解決方案叫計算屬性
計算屬性是vue實例中的一個配置選項：computed
通常里面都是一個個計算相關(guān)的函數(shù)，函數(shù)里頭可以寫大量的邏輯炭玫，最后返回計算出來的值
即我們可以把這些計算的過程寫到一個計算屬性中去燕偶，然后讓它動態(tài)的計算。
<div class="app">
<table border="1">
<thead>
<th>學(xué)科</th>
<th>成績</th>
</thead>
<tbody>
<tr>
<td>數(shù)學(xué)</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>化學(xué)</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);
}
}
});
如上础嫡，
計算屬性一般就是用來通過其他的數(shù)據(jù)算出一個新數(shù)據(jù)，而且它有一個好處就是酝惧，它把新的數(shù)據(jù)緩存下來了榴鼎，當(dāng)其他的依賴數(shù)據(jù)沒有發(fā)生改變，它調(diào)用的是緩存的數(shù)據(jù)晚唇，這就極大的提高了我們程序的性能巫财。而如果寫在methods里，數(shù)據(jù)根本沒有緩存的概念哩陕，所以每次都會重新計算平项。這也是為什么這里我們沒用methods的原因
以上就是Vue的計算屬性的基本用法!
