我們要寫一個成績表如下

<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