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>
  8. <script>
  9. new Vue({
  10. el: '#app',
  11. data: {
  12. sites: [
  13. { name: 'Baidu' },
  14. { name: 'Google' },
  15. { name: 'Taobao' }
  16. ]
  17. }
  18. })
  19. </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>
  8. <script>
  9. new Vue({
  10. el: '#app',
  11. data: {
  12. object: {
  13. name: 'vue.js教程',
  14. url: 'https://www.jishuchi.com',
  15. slogan: '学的不仅是技术,更是梦想!'
  16. }
  17. }
  18. })
  19. </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>