<div id="app">
<table style="border: 1px solid #000">
<thead>
<th>学科</th>
<th>分数</th>
</thead>
<tbody>
<tr>
<td>数学</td>
<td>
<input type="text" v-model.number="math"></input>
</td>
</tr>
<tr>
<td>语文</td>
<td>
<input type="text" v-model.number="yuwen"></input>
</td>
</tr>
<tr>
<td>英语</td>
<td>
<input type="text" v-model.number="english"></input>
</td>
</tr>
<tr>
<td>总分</td>
<td>
{{sum}}
</td>
</tr>
<tr>
<td>平均分</td>
<td>
{{average}}
</td>
</tr>
</tbody>
</table>
</div>
var app = new Vue({
el:"#app",
data:{
math:null||0,
yuwen:null||0,
english:null||0,
},
computed:{
sum:function () {
var math = this.math||0;
var yuwen = this.yuwen||0;
var english = this.english||0;
return math+english+ yuwen
},
average:function () {
return Math.round(this.sum / 3)
}
},