vue如何使用key来优化v-for循环

发布时间:2022-03-19 14:22:47 作者:小新
来源:亿速云 阅读:402

这篇文章将为大家详细讲解有关vue如何使用key来优化v-for循环,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

使用 key 来优化 v-for 循环

v-for 是 Vue 提供的基于源数据多次渲染元素或模板块的指令。正因为是数据驱动,所以在修改列表数据的时候,Vue 内部会根据 key 值去判断某个值是否被修改,其会重新渲染修改后的值,否则复用之前的元素。

这里如果数据中存在唯一表示 id,则推荐使用 id 作为 key,如果没有则可以使用数组的下标 index 作为 key。因为如果在数组中间插入值,其之后的 index 会发生改变,即使数据没变 Vue 也会进行重新渲染,所以最好的办法是使用数组中不会变化且唯一的那一项作为 key 值。例如:

<template>
 <ul>
  <li v-for="(item, index) in arr" :key="item.id">{{ item.data }}</li>
 </ul>
</template>

<script>
export default {
 data() {
  return {
   arr: [
    {
     id: 1,
     data: 'a'
    },
    {
     id: 2,
     data: 'b'
    },
    {
     id: 3,
     data: 'c'
    }
   ]
  }
 }
}
</script>

关于“vue如何使用key来优化v-for循环”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. 怎么在vue中使用v-for实现循环
  2. 浅谈VUE中演示v-for为什么要加key

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue key v-for

上一篇:vue开发中路由跳转尽量使用name而不是path

下一篇:qt MAF过滤的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》