Vue.js 循环语句

v-for

首选准备一个数组
 
var data = [
   		  {name:"盖伦",hp:341},
		  {name:"提莫",hp:225},
		  {name:"安妮",hp:427},
		  {name:"死歌",hp:893}
    ];
 

然后在构建Vue的时候把这个数组作为参数传递进去：
 
data:	{
    heros:data
}
 

最后在视图上，通过v-for 遍历这个数组。
 
<tr v-for="hero in heros">
	<td>{{hero.name}}</td>
	<td>{{hero.hp}}</td>
</tr>	

<scrip
```t src="https://how2j.cn/study/vue.min.js"></script>
  
<style>
table tr td{
	border:1px solid gray;
}
table{
	border-collapse:collapse;
	width:300px;
}
tr.firstLine{
	background-color: lightGray;
}
</style>

<div id="div1">
  
	<table align="center" >
		<tr class="firstLine">
			<td>number</td>
			<td>name</td>
			<td>hp</td>
		</tr>
		
		<tr v-for="hero,index in heros">
			<td>{{index}}</td>
			<td>{{hero.name}}</td>
			<td>{{hero.hp}}</td>
		</tr>	
		
	</table>

</div>
   
<script>
 
var data = [
   		  {name:"盖伦",hp:341},
		  {name:"提莫",hp:225},
		  {name:"安妮",hp:427},
		  {name:"死歌",hp:893}
    ];
new Vue({
      el: '#div1',
      data:	{
    	  heros:data
      }
    })
   
</script>