有時候我們可能需要在{{}}里進行一些計算在展示出來數據：
<div class="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>var app = new Vue({ el:'.app', data:{ Math:88, English:77, chemistry:99, } });雖然能解決問題，但是特別不不清晰。
這種情況下，vue給我們提供了一個特別好的解決方案：計算屬性，
我們可以把這些計算的過程寫到一個計算屬性中去，然后讓它動態的計算就可以了。
計算屬性是vue實例中的選項：computed
通常里面每一個都是計算相關函數，返回最后計算出來的值。
<body> <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> <script src="jquery-3.3.1.js"></script> <script src="vue.js"