how2j.cn

步骤 1 : v-for 循环语句   
步骤 2 : index用法   
步骤 3 : 纯数字遍历   

步骤 1 :

v-for 循环语句

edit
首选准备一个数组

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>
运行效果
<script src="http://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>name</td> <td>hp</td> </tr> <tr v-for="hero in heros"> <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>