Vue.js 循环语句

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

v-for 指令

  1. <div id="app">
  2.   <ol>
  3.     <li v-for="site in sites">
  4.       {{ site.name }}
  5.     </li>
  6.   </ol>
  7. </div>
  9. <script>
  10. new Vue({
  11.   el: '#app',
  12.   data: {
  13.     sites: [
  14.       { name: 'Baidu' },
  15.       { name: 'Google' },
  16.       { name: 'Taobao' }
  17.     ]
  18.   }
  19. })
  20. </script>

模板中使用 v-for：

v-for

  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 可以通过一个对象的属性来迭代数据：

v-for

  1. <div id="app">
  2.   <ul>
  3.     <li v-for="value in object">
  4.     {{ value }}
  5.     </li>
  6.   </ul>
  7. </div>
  9. <script>
  10. new Vue({
  11.   el: '#app',
  12.   data: {
  13.     object: {
  14.       name: 'vue.js教程',
  15.       url: 'https://www.jishuchi.com',
  16.       slogan: '学的不仅是技术，更是梦想！'
  17.     }
  18.   }
  19. })
  20. </script>

你也可以提供第二个的参数为键名：

v-for

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

第三个参数为索引：

v-for

  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 也可以循环整数

v-for

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