Vue 之v-for中获取index（element）

最新推荐文章于 2024-05-28 23:40:22 发布
最新推荐文章于 2024-05-28 23:40:22 发布
阅读量1.4w 收藏 6
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asd497907957/article/details/105531463
版权

可以通过事件，把item和index传给函数，这样就能获取到idenx了，这样做的好处是我们定位一个数组元素的时候重名的时候用indexof就会获取到并不一定是我们想要的，来看element官网的一个实例
在这里插入图片描述
这是一个动态的可以关掉的标签，如果再添加一个标签一，如图：
在这里插入图片描述
如果把红色框框内的“标签一”关掉，最后我们想要的结果是：标签一，标签二，标签三
然而事实上的结果是：标签二，标签三，标签一
这是因为官方提供的方法是indexOf来定位位置
在这里插入图片描述
在这里插入图片描述
所以遇到名字一样的会取第一个，这不符合我们的要求，这个时候就需要把索引（idenx）获取到，只有就能实现想要的效果：
在这里插入图片描述
在这里插入图片描述
源代码可以见element官网tag标签中的动态编辑标签：
Tag 标签

音尘啊
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2.0 v-for filter列表过滤功能的实现
10-18
在Vue2.0中，`v-for`指令用于遍历数组或对象，生成对应的DOM元素。结合`filter`函数，我们可以实现列表的过滤功能，帮助用户动态筛选出满足特定条件的列表项。以下是对Vue2.0 `v-for`与`filter`功能的详细解析： 1....
vue-manage-system.rar
03-11
在Vue Manage System中，你可以看到这些核心特性的实际应用，比如通过`v-if`、`v-for`指令进行条件渲染和循环渲染，使用计算属性来简化复杂逻辑，以及通过组件实现复用和隔离。 Element-UI是Vue.js的官方推荐UI库，...
v-for循环遍历数组与对象
weixin_54327001的博客
11-21 760
v-for不是必须写在ul/li中的，下面只是为了演示方便。
Vue v-for指令
qq_45748438的博客
08-11 2573
列表渲染 v-for 指令的使用 v-for指令可以用来遍历数组/对象，它可以根据data中数据的更新动态刷新视图 遍历数组 1.1 使用方式： v-for=“item in arr” item是一个参数，表示数组中的每一项，arr也是一个参数，表示你要遍历的数组 1.2 使用方式： v-for="(item, index) in arr" index表示数组项的索引 ⭐ 遍历对象 2.1 使用方式：v-for=“value in obj” value 表示对象的属性的值 obj就是需要遍历的对象
Vue 3中的v-for指令使用详解
最新发布
李长渊的博客
05-28 1926
Vue 3中的v-for指令使用详解
在Vue中获取v-for的index值
Tiger_Paul的博客
02-19 6912
<el-submenu :index="item.id+''" v-for="(item,index) in menuList" :key="item.id"> <template slot="title"> <i :class="icons[index]"></i> <span>{{item.authName}}</span> </template> data() { return { ic.
vue 中 v-for 循环数字，index 从0开始。
是秃子总会发光
02-15 1万+
vue 中 v-for 循环数字，index 从0开始。
使用vue时如何获取v-for数组的下标index值的方法
热门推荐
weixin_43968782的博客
10-28 2万+
<div v-for="(item,index) in arr" : key="index" @click="getIndex(item,index)"> <p>{{item}}</p> </div> methods:{ getIndex(item,index){ console.log(item,index) //这里的item是点击获取当前值的每一项内容 //这里的index是点击获取当前值的下标 } } ...
vue-v-for遍历index与id
m0_64081601的博客
03-29 746
当添加一个新的数据时，会生成新的数据段，然后生成新的虚拟DOM，这时就会使用虚拟DOM对比算法用新的虚拟DOM和旧的虚拟DOM进行对比。如果key相同的话，比较其他的一样不一样，若一样将旧虚拟DOM中映射出来的真实DOM的值进行复用，反之直接写入新的真实DOM之中。紧接着Vue就会根据新的数据生成新的虚拟DOM，然后新的虚拟DOM就会去和旧的虚拟DOM进行diff(虚拟DOM对比算法)如果key一样的话，进行其他的对比，一样的可以进行再次的复用，使用id作为key，保证了key的唯一性，防止数据错乱。
Vue循环中多个input绑定指定v-model实例
10-14
在Vue.js中，`v-model`是一个非常强大的特性，它实现了视图与数据的双向绑定，使得我们在处理用户输入时能轻松地获取和更新数据。当涉及到在循环中使用`v-model`时，通常是为了创建多个类似的表单元素，如在列表或...
vue element-ui实现动态面包屑导航
10-15
<el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{ item.meta.title }}</el-breadcrumb-item> </el-breadcrumb> ``` 在这个例子中，我们使用 `v-for` 指令遍历 `breadList` 数组，`...
在vue的v-for中使用索引index值
01-06
在vue的v-for中使用索引index值
vue指令-v-for
玉安_ZhangDe的博客
07-10 767
vue指令-v-for 目标: 列表渲染, 所在标签结构, 按照数据数量, 循环生成 v-for="(值, 索引) in 目标结构" v-for="值 in 目标结构"
vue v-for循环中不要使用index作为:key值
www930942的博客
11-11 2088
内部原理 v-for循环时会先在缓存中判断当前的key对应的这一项是否在缓存中: 是的话,会直接取出来,更新数据 否则,重新在缓存中创建基于当前key的数据,然后渲染到页面 使用下标 例:循环一个数组,完成之后,在给数组unshift一个元素,会导致新插入的这个元素直接去匹配缓存中index为0的那一项,而不会重新去创建 即index已经不是第一次渲染的元素了,映射关系已经改变 使用唯一值,如id 例:循环一个数组,完成之后,在给数组unshift一个元素,由于新的id和缓存中的不匹配,他还是会去
Vue-循环指令v-for
qq_52347540的博客
09-14 744
作用 可以循环打印数组 用法 1.v-for: ( 变量名 ，索引名) in 数组名 例如：v-for:(a,index) in array【那么它就会循环执行，a与index就是数组的每一个元素和索引】 2.v-for: 变量名 in 数组名 例如：v-for：a in array 效果 1.在列表标签中，它就会自动添加列表 例如： <ul> <li v-for="(a,index) in arr">{{index+1+":"+a}}</li>
使用elementUI插件后v-for遍历时index索引值报错
m0_48994856的博客
10-08 418
使用elementUI插件后v-for遍历时index索引值报错
vue 在v-for 中使用v-model绑定变量
weixin_45925443的博客
09-09 1万+
需求 当在使用v-for循环生成一个带表单的标签块,表单需要进行双向绑定时 如果直接在items数组中的对象属性VM赋值给v-model实现数据的双向绑定 v-model="obj.name" //这样的效果 我一开时的做法是这样的（错误）： <div > <input v-for="(item,index) in items" :key="index" :type="item.type" :placehol
Vue 总结
打杂人
04-17 529
vue 是什么 简介型的javascript框架 个人开发 (刘雨溪) 特点：mvvm m=mvc module 模型 v=view 视图 c=controller 控制器 mvvm m=mvc module 模型 v=view 视图 vm (视图与数据之间的传递) vue1 双向数据绑定...
v-for 循环 index的传值问题？
weixin_33691700的博客
01-04 1967
&lt;el-submenu :index="index" v-for="(item,index) in menuList"&gt; &lt;el-menu-item :index="index" v-for="(subItem,subindex) in item.subMenuList"&gt; {{inde...
vuev-for绑定refs
07-28
在Vue中，v-for指令可以用于循环渲染元素列表。如果你想要在v-for循环中绑定ref引用，可以通过使用动态ref名称来实现。 下面是一个示例，展示了如何在v-for循环中绑定refs： ```html <template> <div> <div v-for="(item, index) in items" :key="index" :ref="'itemRef_' + index"> {{ item }} </div> </div> </template> <script> export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3'] }; }, mounted() { // 访问refs for (let i = 0; i < this.items.length; i++) { const refName = 'itemRef_' + i; const element = this.$refs[refName][0]; console.log(element); // 执行其他操作... } } }; </script> ``` 在上面的例子中，我们通过使用动态的ref名称 `itemRef_ + index` 来绑定每个循环项的ref引用。在mounted生命周期钩子中，我们可以通过 `this.$refs` 来访问这些引用，并执行相应的操作。 请注意，`this.$refs[refName]` 返回的是一个数组，因为可能存在多个具有相同ref名称的元素。所以我们使用 `this.$refs[refName][0]` 来获取第一个匹配的元素。 希望这个例子能够帮助你理解如何在v-for循环中绑定refs！如果还有其他问题，请随时问我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值