看程序学Vue.js 4- VUE.JS 使用 V-FOR 循环语句实例

步骤 1 : v-for 循环语句

<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>
试一下

步骤 2 : index用法

<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>number</td>
<td>name</td>
<td>hp</td>
</tr>

<tr v-for="hero,index in heros">
<td>{{index+1}}</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>

步骤 3 : 纯数字遍历

<script src="http://how2j.cn/study/vue.min.js"></script>

<div id="div1">
<div v-for="i in 10">
{{ i }}
</div>
</div>

<script>

new Vue({
el: '#div1'
})

</script>