vue v-for循环的key值使用注意事项

最新推荐文章于 2024-06-26 16:30:30 发布

weixin_流年

最新推荐文章于 2024-06-26 16:30:30 发布

阅读量1.9k

点赞数

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_40967353/article/details/116781519

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了 Vue 中 v-for 指令使用时必须添加 key 值的原因，强调了其与 Vue 渲染和更新机制的关联。正确设置 key 值有助于 Vue 更高效地跟踪每个节点的身份，优化更新性能。文章通过示例展示了如何在模板中为 v-for 循环的元素指定 key，并提示了使用索引作为 key 的潜在问题，建议使用唯一标识符。

摘要由CSDN通过智能技术生成

vue v-for循环时一定要加key值,vue官方也说一定要加,这和vue渲染机制和更新机制有很大关联.不加key的话eslint或vuter也会报错.
使用方法:
1.一般可以使用索引充当key值(不涉及节点增删时),不过最好使用数组中的对象中的唯一键作为key.即[{id:xx,...},{id:xxx,...}]中的id作为key。

2.使用template作为循环语句的元素时,key值添加在template内的第一级子元素上.例如:

    <template v-for="item in routers">
        <el-submenu :index="item.path" v-if="item.children&&item.children.length" :key="item.path">
          <template slot="title">
            <i class="icon iconfont" :class="item.meta.icon"></i>
            <span>{{item.meta.title}}</span>
          </template>
          <el-menu-item
            :index="val.path"
            :route="val.path"
            v-for="val in item.children"
            :key="val.name"
          >
            <template slot="title">
              <span>{{val.meta.title}}</span>
            </template>
          </el-menu-item>
        </el-submenu>
        <el-menu-item :index="item.path" :route="item.path" v-else :key="item.path">
          <template slot="title">
            <i class="icon iconfont" :class="item.meta.icon"></i>
            <span>{{item.meta.title}}</span>
          </template>
        </el-menu-item>
      </template>

使用v-for循环的时候，key值是必不可少的，这点需要尤其的注意。