循环语句
Vue.js循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
注意：
v-for循环的时候，key属性只能使用number或String。
key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。
在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串/数字 类型 :key值。
v-for 可以绑定数据到数组来渲染一个列表：
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }} </li>
</ol></div>
<script>new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})</script>v-for迭代对象
v-for 可以通过一个对象的属性来迭代数据：
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }} </li>
</ul></div>
<script>new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})</script>
image.png
v-for迭代整数
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }} </li>
</ul></div><script>new Vue({
el: '#app'
})</script>v-for循环数组
<div id="app"><ul>
<li v-for="n in [1,3,5]">
{{ n }} </li>
</ul></div><script>new Vue({
el: '#app'
})</script>郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。