使用Vue，输入学生的成绩，得出总分和平均得分

使用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>

最后的效果