使用Vue,输入学生的成绩,得出总分和平均得分
使用Vue,输入学生的成绩,动态的得出总分和平均得分向这种需要计算的,Vue中有个属性能帮我们解决:计算属性表单的代码:在这里,主要的使用了v-model 双向绑定,其中还有个小细节,// 是数据类型为数值!v-model.number// 还有另外一个后缀://懒加载,当用户输入完毕按回车键的时候,数据才同步v-model.lazy下面展示 表单代码。<div id="app">&l
·
使用Vue,输入学生的成绩,动态的得出总分和平均得分
向这种需要计算的,Vue中有个属性能帮我们解决:
计算属性
表单的代码:
在这里,主要的使用了 v-model 双向绑定,其中还有个小细节,
// 是数据类型为数值!
v-model.number
// 还有另外一个后缀:
//懒加载,当用户输入完毕按回车键的时候,数据才同步
v-model.lazy
下面展示 表单代码
。
<div id="app">
<table border="1" width="200" cellpadding="10" cellspacing="0" align="center" >
<tr >
<th>序号</th>
<th>姓名</th>
<th>班级</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
<th>总分</th>
<th>平均分</th>
</tr>
<tr>
<td>1</td>
<td>xx</td>
<td>八年级</td>
<td>
<input type="text" v-model.number="chinese">
</td>
<td>
<input type="text" typeof="int" v-model.number="english">
</td>
<td>
<input type="text" v-model.number="math" >
</td>
<td>
<span>{{sum}}</span>
</td>
<td> {{avg}} </td>
</tr>
</table>
Vue 部分的代码
下面展示一些 内联代码片
。
<script>
let xm =new Vue({
el:"#app",
data:{
chinese:0,
math: 0,
english: 0
},
//计算属性,语法用的是ES6
computed:{
sum(){
return this.chinese+this.math+this.english
},
avg(){
return Math.round(this.sum/3)
}
}
})
</script>
最后的效果
更多推荐
已为社区贡献1条内容
所有评论(0)