Vue.js 基礎學習計算屬性computed

標籤：var   average   code   改變   float   math   order   input   bsp   

我們要寫一個成績表如下

數學	90
物理	80
英語	70

 

<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