Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究

最新推荐文章于 2024-02-20 19:29:45 发布
最新推荐文章于 2024-02-20 19:29:45 发布
阅读量812 收藏
点赞数
分类专栏： vue2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhumengzj/article/details/79317147
版权

Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究

Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究

在github上阅览README.md以获得最佳阅读体验，点这里

v-for响应式key, index及item.id参数对v-bind:key值造成差异研究

实验背景

通常情况下，我们渲染一个li列表，采用v-for指令进行渲染，我们需要给渲染的每一项元素绑定一个key值，其实绑定该key值是可选的，但会引起警告。使用v-for参数的过程中，由于v-for提供三个参数，分别是: value, key, index。对其哪一个作为元素绑定key值更能得到我们想要的响应式渲染作出实验。

实验目的

总结出在采用不同参数作为元素绑定key值时，出现的不同的渲染结果，得出最优渲染方案

实验准备

我们准备第三个可以作为绑定key值的变量，分别是:
  • 渲染item自带属性id
  • v-for提供的key
  • v-for提供的index
我们制定一个参照表格
li绑定key值类型 id index key
实验一 选取 x
最低0.47元/天 解锁文章
zhumengzj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
v-for循环，循环体绑定id
WX_nbclass的博客
04-30 1875
v-for循环，循环体绑定id;css选择器模糊匹配
v-for当中为什么加id
Healer000000的博客
10-16 612
当我们不加id的情况下，计算机渲染的方式是一一比较进行插入，如下例子： 比如，在2和3中间插入5，计算机的编译器会从1开始一一进行比较，知道找到3才会开始进行替换，并且3之后的所有数据都需要进行替换。 这样如果数据量多的情况下是比较麻烦的，而vue当中组件的复用率是很高的，为了不一一进行比较，提高效率，所以会用id进行标注，当需要在2和3处插入5的时候，通过id找到2和3的位置即可。 还有一种就是，比如多选框，我们选中了第二个位置的数据，在第一位添加新数据，那么原有的第一位数据就会变为第二位，这样就不准确
vue v-for循环数据列表，点击获取循环列表当前项的某一项的数据，例如id
热门推荐
好巧的博客
11-30 5万+
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。定义一个点击事件并传入参数（点击的时候需要获取什么数据就传入什么），示例以获取 id 为例。如果本篇文章对你有帮助的话，很高兴能够帮助上你。'当前被点击的id: '本文为vue 2语法。
【Vue】v-for中:key中item.id与Index使用的区别
最新发布
lklalmq的博客
02-20 903
先说结论，推荐使用【:key="item.id"】而不是将数组下标当做唯一标识，前者能做到全部复用。场景：删除无序列表中的<li>标签。
解决v-for中使用v-if或者v-bind:class失效的问题
10-17
在Vue.js开发过程中，我们经常会遇到在`v-for`循环中使用`v-if`或`v-bind:class`（简写为`:class`）时遇到一些失效的问题。这主要是由于Vue的渲染机制导致的，理解这个问题的关键在于理解Vue的响应式系统和虚拟DOM的...
vue 实现v-for循环回来的数据动态绑定id
10-16
动态绑定ID的关键在于`v-bind:id`（简写为`:id`），它允许我们在每次循环中调用`forId`方法，生成不同的ID值。这样，每个`li`元素就有了独特的ID，如`forid_0`、`forid_1`和`forid_2`。这种做法对于事件监听、元素...
在vue中使用v-bind:class的选项卡方法
10-17
<li v-for="(item, index) in items" @click="setColor(index)" :key="item.message" :class="{active: index == num}"> {{ item.message }} ``` 在上面的代码中，`v-for`指令用于遍历`items`数组并为每个项...
vue使用v-for实现hover点击效果
10-17
<li v-for="(item, index) in itemArr" :key="index" :class="{'clickBg':index==clickIndex,'hoverBg':index==hoverIndex}" @click="clickIndex = index" @mouseover="hoverIndex = index" @mouseout=...
详解vue中v-bind:style效果的自定义指令
11-21
在有些时候，你仍然需要对普通的DOM元素进行底层的操作，这个时候就可以用到自定义指令。 2.自定义指令的语法 全局自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素...
vue.js vue v-for循环遍历如何动态绑定id
信徒博客
04-07 1万+
html页面的代码如下 <body> <!-- 返回的按钮 --> <div id="allli"> <ul v-for="(item,index) in sites"> <li>{{item.name}}</li> <li :id="step(index)" > <img :id="st...
VUE中v-for循环根据index来给循环的每个部分添加不同的id名
赶快学习，拉开差距的博客
01-28 6019
VUE中v-for循环根据index来给循环的每个部分添加不同的id名 <div v-for="(item,index) in courses"> <div :id="course(index)"> <span>{{ item.name }}</span> <span>{{ item.teacher }}</spa...
vue中v-for为何要加key？index为何不推荐作为key
angula
08-07 8061
在使用vue组件的时候，我们经常会遇到v-for必须要加key值 来举个例子进行说明吧！ 不存在key的情况 <!-- * @Author: angula * @Date: 2020-08-07 00:05:05 * @LastEditTime: 2020-08-07 00:17:21 * @FilePath: \Vue\study\test1\key详解.html --> <!DOCTYPE html> <html lang="zh-CN"> <head
css绑定根据index变化的key变量
uniquemei的博客
08-30 224
vue绑定动态key
v-for 绑定key值,不建议使用index (原因详解)
weixin_46174785的博客
07-10 6947
v-for 中的key值： 使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素; 我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法; 例子： const list = [ { id: 1, name: 'test1', }, { id: 2, name: '
v-for 中的key设置为index值会有什么问题
青城的博客
12-07 987
如果列表项没有唯一标识符，可以使用其它属性或组合属性作为 key，以确保每个列表项的 key 值都是唯一的。在 Vue.is 中，v-for 指令中的 key 属性用于指定循环列表项的唯一标识，以便 Vue 在更新 DOM 时能够正确地追踪每个列表项的状态。通常情况下，我们会将 key 属性设置为列表项的唯一标识符，例如 ID 等。更新问题: 当列表项的顺序发生变化时2.由于每个列表项都使用相同的 index 值作为 key，Vue 可能会错误地认为一些列表项没有发生变化，从而不会正确地更新他们的状态。
Vue v-for详细使用
技术前端，忠于热爱 @0.活在风浪里
12-06 4万+
目录 定义vue数据❤ vue循环数组❤❤❤❤ vue循环对象❤❤❤❤ 效果❤ 四种创建对象的方法：❤❤❤ 两种创建数组的方法：❤❤❤ 对象的两种取值方式：❤❤❤❤ 数组扁平化❤❤ 声明函数的6种方式 for in 遍历对象的key 和 value❤❤❤ for of 遍历对象的key 和 值（value）❤❤❤ for in / for of 遍历数组 定义vue数据❤ data: { //数组 ...
ESLint: Custom elements in iteration require 'v-bind:key' directives. (vue/valid-v-for)
06-09
这是ESLint的一个警告，它提示你在使用`v-for`指令迭代自定义元素时，必须在元素上添加`v-bind:key`指令。这是为了在Vue中优化渲染性能，确保每个元素都有一个唯一的标识符。 例如，如果你有一个自定义元素`my-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值