跳到主要内容

v-for

一、认识​

v-for 基于原始数据多次渲染元素或模板块。

二、语法​

2.1 对象​

<div v-for="(value, key) in object"></div>

<div v-for="(value, name, index) in object"></div>

2.2 数组​

<div v-for="(item, index) in list"></div>

2.3 数字​

2.4 字符串​

三、问题​

3.1 Vue 中为何不要把 v-if 和 v-for 同时用在同一个元素上， 原理是什么?​

确实，将 v-if 和 v-for 同时用在同一个元素上可能会导致性能问题。原因在于 v-for 具有比 v-if 更高的优先级，它会在每次渲染的时候都会运行。这意味着，即使在 某些情况下 v-if 的条件为 false，v-for 仍然会对数据进行遍历和渲染。这样会导致一些不必要的性能消耗，特别是当数据量较大时。Vue 在渲染时会尽量复用已经存在的元素，而不是重新创建和销毁它们。但是当 v-for 遍历的数据项发生变化时，Vue 会使用具有相同 key 的元素，此时 v-if 的条件可能会影响到之前的元素，导致一些不符合预期的行为。