Vue遍历渲染

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

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

遍历数组

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

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

1
2
3
<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:

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

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

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

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

v-for on a