v-forVue奇怪的行为

v-for 指令用于循环渲染数组或对象，它通常运行良好，但也有一些出现奇怪行为的情况。其中一个问题是当动态更改数量时，Vue 没有正确地更新 DOM。

例如，在以下示例中，我们将在数组中添加一个元素，但在浏览器中并没有正确地显示：

HTML:

<div id="app"> <ul> <li v-for="item in items">{{ item }}</li> </ul> <button @click="addItem">Add item</button> </div>

JavaScript:

new Vue({ el: '#app', data: { items: ['item 1', 'item 2'] }, methods: { addItem() { this.items.push('item ' + (this.items.length + 1)) } } })

当您单击“添加项目”按钮时，Vue 不会将新项目正确添加到 DOM 中。相反，它似乎仍在计算旧数组中的 DOM。

解决这个问题的方法是使用一个 key 值来唯一标识每个项，因此当我们添加或删除一个元素时，Vue 可以正确地识别哪些元素被修改或删除。

在我们的示例中，我们可以将 v-for 指令设置为 item in items，并在每个项目上设置一个 key：

HTML:

<div id="app"> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> <button @click="addItem">Add item</button> </div>

JavaScript:

new Vue({ el: '#app', data: { items: ['item 1', 'item 2'] }, methods: { addItem() { this.items.push('item ' + (this.items.length + 1)) } } })

现在，当我们添加一个新项目时，Vue 可以正确地更新 DOM。