v-for 命令主要用于列表渲染,将根据接收到的数组重复渲染 v-for 绑定到DOM元素及内部的子元素,并且可以通过设置别名的方式,获取数组内数据渲染到节点中.
一个简单的demo
<div id="demo">
<ul>
<li v-for='data in aDatas'>
<span>{{data.title}}</span>
<strong>{{data.content}}</strong>
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#demo',
data:{
aDatas:[
{title:"title1",content:"content1"},
{title:"title2",content:"content2"},
{title:"title3",content:"content3"},
{title:"title4",content:"content4"},
{title:"title5",content:"content5"}
]
}
});
</script>
其中aDatas 为数据中的属性名,data为别名
也可以通过这种方式来显示列表在数组中的序号
<div id="demo">
<ul>
<li v-for='(data,index) in aDatas'>
<em>{{index}}</em>
<span>{{data.title}}</span>
<strong>{{data.content}}</strong>
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#demo',
data:{
aDatas:[
{title:"title1",content:"content1"},
{title:"title2",content:"content2"},
{title:"title3",content:"content3"},
{title:"title4",content:"content4"},
{title:"title5",content:"content5"}
]
}
});
</script>
v-for 也支持单个常数,用来控制循环次数
另一个简单的demo
<div id="demo">
<ul>
<li v-for='value in 5'>
{{value}}
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#demo'
});
</script>
