Vue遍历渲染

Vue 中要遍历 n 项可以这么写

<div v-for="i in n">{{i}}</div>
<div v-for="i in new Array(n)">{{i}}</div>

遍历数组

<div v-for="(item, index)in array">
  {{ item }} - {{ index }}
</div>

遍历对象，遍历顺序就是对象书写顺序

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

v-for 和 v-if

当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。所以下面代码在arr.length > 2的情况下会报错RangeError: Invalid array length:

<div v-if="arr.length < 2"
  v-for="item in (2 - arr.length)">
</div>

这是因为负数不能遍历，即使有v-if的限制也会报错！
可以修改为

<div v-if="arr.length < 2"
  v-for="item in Math.abs(2 - arr.length)">
</div>

如果你的目的是有条件地跳过循环的执行，那么可以将v-if置于外层元素 (或 <template>)上。

v-for on a