預計效果
頁面輸入數學、物理、英語分數，自動計算出總分和平均分，並展示到界面，如下圖所示
代碼
該代碼可在我的GitHub中找到，鏈接在此
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性使用</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id = "app">
<p>數學 <input type = "text" v-model.number = "math"></p>
<p>物理 <input type = "text" v-model.number = "physics"></p>
<p>英語 <input type = "text" v-model.number = "English"></p>
<p>總分 {{sumNum}}</p>
<p>平均分 {{averageNum}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
math : null,
physics : null,
English : null,
},
computed :{
sumNum: function () {
return this.math + this.physics + this.English;
},
averageNum: function () {
return Math.round(this.sumNum / 3);
}
}
})
</script>
</body>
</html>
結果展示
輸入數據，總分和平均分會隨着發生變化，效果如下 GIF 所示
