vue key

作者：Cold—blooded凉薄发布日期:2025-08-26 浏览:141

<template>
  <div>
    <!-- 使用 v-for 渲染列表，并为每个元素添加唯一的 key -->
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    };
  }
};
</script>

解释说明：

v-for 指令用于遍历数组并渲染列表。
:key 是 v-bind:key 的缩写，用于给每个列表项指定一个唯一的标识符。
Vue 使用 key 来优化 DOM 更新，确保组件或元素的重用和排序更加高效。如果 key 值发生变化，Vue 会重新渲染对应的元素，而不是复用已有的 DOM 元素。

上一篇：vue ajax请求

下一篇：ant design vue 4