《星露穀物語》釋出了1.5.6補丁 修復了若干bug
阿新 • • 發佈：2021-12-22
有時候我們可能需要在{{}}裡新增一些需要計算再展示出來資料
例如：在頁面中展示學生的成績總分和平均分：
<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的原因以上就是
Vue的計算屬性的基本用法!