Vue.js 循环语句

v-for 指令

v-for 指令可以绑定数组的数据来渲染一个项目列表：

1. <template>
2. <ol>
3. <li v-for="site in sites">
4. {{ site.name }}
5. </li>
6. </ol>
7. </template>
8. <script>
9. export default {
10. name: 'MyTemplate',
11. data() {
12. return {
13. sites: [
14. {name: 'Ddandelioncloud'},
15. {name: 'Google'},
16. {name: 'Taobao'}
17. ]
18. }
19. }
20. }
21. </script>

v-for 迭代对象

1. <template>
2. <ul>
3. <li v-for="value in object">
4. {{ value }}
5. </li>
6. </ul>
7. </template>
8. <script>
9. export default {
10. name: 'MyTemplate',
11. data() {
12. return {
13. object: {
14. name: '蒲公英云',
15. url: 'http://www.dandelioncloud.cn',
16. slogan: '学的不仅是技术，更是梦想！'
17. }
18. }
19. }
20. }
21. </script>

或者

1. <ul>
2. <li v-for="(value, key, index) in object">
3. {{ index }}. {{ key }} : {{ value }}
4. </li>
5. </ul>

key为键名 index 为索引

同时v-for还支持迭代整数

1. <ul>
2. <li v-for="n in 10">
3. {{ n }}
4. </li>
5. </ul>