Vue的循环主要是
- v-for="hero in heros"
- v-for="hero,index in heros" 类似于heros[index]=hero这样子循环
- v-for="i in 10" 最基本的,i=0 i++
<!DOCTYPE html>
<html>
<head>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- vue对象里id绑定的div不能与实际操作是一个div -->
<div id="div2">
<div v-for="i in 10">{{i}}</div>
</div>
<div id="div1">
<table border="1">
<tr>
<th>number</th>
<th>name</th>
<th>hp</th>
</tr>
<!-- <tr v-for="hero in heros"> -->
<tr v-for="hero,index in heros">
<td>
{{index+1}}
</td>
<td>
{{hero.name}}
</td>
<td>
{{hero.hp}}
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
var data = [
{name:"盖伦",hp:341},
{name:"提莫",hp:225},
{name:"安妮",hp:427},
{name:"死歌",hp:893}
];
new Vue({
el: '#div1',
data: {
heros:data
}
})
new Vue({
el:'#div2'
})
</script>