Vue.js 实现成绩表展示 - 代码补全示例

<div id='example'>
<h2>成绩表</h2>
<label>姓名：</label><span>{{name}}</span>
<label>性别：</label><span>{{sex}}</span>
<label>年龄：</label><span>{{age}}</span>
<div class='report'>
 <div class='title'>
  <div>学期</div>
  <div>数学</div>
  <div>物理</div>
  <div>化学</div>
  <div>英语</div>
  <div>计算机</div>
  <div>总分</div>
 </div>
 <div class='content' v-for='(grade,index) in grades'>
  <div>{{grade.term}}</div>
  <div v-for='score in Object.values(grade.scores)'>
   <div>{{score}}</div>
  </div>
  <div>{{total(index)}}</div>
 </div>
</div>
</div>
<script type='text/javascript'>
var exam = new Vue({
 el:'#example',
data:{
 name : '张无忌',//姓名
 sex : '男',//性别
 age : 20,//年龄
 grades : [{
  term : '第一学期',
  scores : {
   math : 90,
   physics : 85,
   chemistry : 95,
   english : 86,
   computer : 96
  }
 },{
  term : '第二学期',
  scores : {
   math : 92,
   physics : 83,
   chemistry : 90,
   english : 88,
   computer : 95
  }
 }]
},
methods : {
 total : function(index){
  var total = 0;//定义总分
  var obj = this.grades[index].scores;//获取分数对象
  for(var i in obj){
   total += obj[i];
  }
        return total;//返回总分
 }
}
})
</script>