模板中的循环

v-for 指令通过遍历一个数据（或对象），将『指令所在的元素』循环输出到页面上。

<!-- 注意 v-for 是加在了 ul 上，还是 li 上？-->
<ul>
  <li v-for="(dog, idx) in dogs">{{ dog }}</li>
</ul>

data() {
  return {
    dogs: ['tommy', 'jerry', 'ben']
  }
}

如果你没有用到循环中的索引变量，那么 v-for 中你可以将它省略掉，写成：

<!-- 个人建议初学者不要省略，以免忘记有个『索引变量』可用。 -->
<li v-for="dog in dogs">{{ dog }}</li>

v-for 指令同样支持对象的遍历（一般比较少见）。

  <ul>
    <li v-for="(value, key) in tom">{{key}} : {{value}}</li>
  </ul>

data() {
  return {
    tom: {
      name : 'tom',
      age : 20,
      email : '[email protected]'
    }
  }
}

最后，v-for 也可以实现简单的计数循环，这种情况下，循环计数是从 1 开始的。例如：

<ul>
  <li v-for="n in 10">{{ n-1 }}</li>
</ul>