Vue 循环语句
循环语句 ¶
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令
html
1<div id="app">
2 <ol>
3 <li v-for="site in sites">
4 {{ site.name }}
5 </li>
6 </ol>
7</div>
8
9<script>
10new Vue({
11 el: '#app',
12 data: {
13 sites: [
14 { name: 'Runoob' },
15 { name: 'Google' },
16 { name: 'Taobao' }
17 ]
18 }
19})
20</script>模板中使用 v-for：
html
1<ul>
2 <template v-for="site in sites">
3 <li>{{ site.name }}</li>
4 <li>--------------</li>
5 </template>
6</ul>v-for 迭代对象 ¶
v-for 可以通过一个对象的属性来迭代数据：
html
1<div id="app">
2 <ul>
3 <li v-for="value in object">
4 {{ value }}
5 </li>
6 </ul>
7</div>
8
9<script>
10new Vue({
11 el: '#app',
12 data: {
13 object: {
14 name: '菜鸟教程',
15 url: 'http://www.runoob.com',
16 slogan: '学的不仅是技术，更是梦想！'
17 }
18 }
19})
20</script>你也可以提供第二个的参数为键名：
html
1<div id="app">
2 <ul>
3 <li v-for="(value, key) in object">
4 {{ key }} : {{ value }}
5 </li>
6 </ul>
7</div>第三个参数为索引：
html
1<div id="app">
2 <ul>
3 <li v-for="(value, key, index) in object">
4 {{ index }}. {{ key }} : {{ value }}
5 </li>
6 </ul>
7</div>v-for 迭代整数
v-for 也可以循环整数
html
1<div id="app">
2 <ul>
3 <li v-for="n in 10">
4 {{ n }}
5 </li>
6 </ul>
7</div>