Vue.js 循环指令 - 学习 Vue.js 2 - 简单教程，简单编程

Vue.js 内置了 v-for 指令用于循环输出内容

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

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

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
<footer>简单教程，简单编程<br/>Copyright © 简单教程</footer>
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Twle' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

运行范例 »

模板中使用 v-for

<div id="app">
  <ul>
    <template v-for="site in sites">
      <li>{{ site.name }}</li>
      <li>--------------</li>
    </template>
  </ul>
</div>
<footer>简单教程，简单编程<br/>Copyright © 简单教程</footer>
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Twle' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

运行范例 »

v-for 用于迭代对象

v-for 可以通过一个对象的属性来迭代数据

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
<footer>简单教程，简单编程<br/>Copyright © 简单教程</footer>
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '简单教程',
      url: 'https://www.twle.cn',
      slogan: '简单教程，简单编程'
    }
  }
})
</script>

运行范例 »

第二个的参数为键名

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>
<footer>简单教程，简单编程<br/>Copyright © 简单教程</footer>
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '简单教程',
      url: 'https://www.twle.cn',
      slogan: '简单教程，简单编程'
    }
  }
})
</script>

运行范例 »

第三个参数为索引

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>
<footer>简单教程，简单编程<br/>Copyright © 简单教程</footer>
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '简单教程',
      url: 'https://www.twle.cn',
      slogan: '简单教程，简单编程'
    }
  }
})
</script>

运行范例 »

v-for 迭代整数区间

v-for 也可以循环整数区间

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>
<footer>简单教程，简单编程<br/>Copyright © 简单教程</footer>
<script>
new Vue({
  el: '#app'
})
</script>

运行范例 »