vue（6）v-for指令用法，对json数据处理
序
什么语法都无法逃脱分支，循环，Vue的循环什么样记录下
示例效果
示例代码
展开查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 生成列表 -->
<div>
<ul v-for="(student,index) in students">
<li>{{index+1}}:name:{{student.name}},age:{{student.age}},class:{{student.class}}</li>
</ul>
</div>
<!-- 生成表格 -->
<div>
<table border="1"style="border-collapse:collapse; text-align: center;">
<tr>
<th>序号</th>
<th>名字</th>
<th>年龄</th>
<th>班级</th>
<th>语文</th>
<th>数学</th>
<th>总成绩</th>
</tr>
<tr v-for="(student,index) in students" >
<td>{{index+1}}</td>
<td>{{student.name}}</td>
<td>{{student.age}}</td>
<td>{{student.class}}</td>
<td>{{student.scores.chinese}}分</td>
<td>{{student.scores.math}}分</td>
<td>{{total(index)}}分</td>
</tr>
</table>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
showPic:false,
showtext:"显示",
students:[
{
name:'张三',
age:18,
class:'软工',
scores:{
chinese:100,
math:20
}
},
{
name:'李四',
age:19,
class:'软工',
scores:{
chinese:90,
math:60
}
},
]
},
methods:{
total:function(index){
var totalScore = 0;
var scores=this.students[index].scores;
for(var i in scores){
totalScore+=scores[i]
}
return totalScore;
}
},
})
