v-for循环出多个元素，如何单独选中目标元素

最新推荐文章于 2023-10-17 13:58:40 发布

「Stand」

最新推荐文章于 2023-10-17 13:58:40 发布

阅读量3.8k

点赞数 3

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

本文链接：https://blog.csdn.net/hmhmhm0319/article/details/125368985

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Vue中使用v-for循环渲染元素时，如何实现每个元素独立的鼠标移入和移出效果。通过设置动态类名和传递索引来区分不同元素，解决了事件触发时影响所有元素的问题。在changeBg和changeBgBack方法中，利用selectIndex变量来切换元素的类名，从而达到只改变当前目标元素样式的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们经常使用vue中v-for进行元素的循环渲染，渲染之后需要添加单独的功能（例如鼠标移入目标div，此div变色），这个时候就会遇到一些问题。

无法单独选取当前元素！

例如：（data、methods部分已省略）

<div class=rolesOut ref="roles" v-for="item in list" :key="item.id"
    @mouseenter="changeBg" @mouseleave="changeBgBack">

上述代码中，我循环渲染了多个div，并添加了鼠标移入和移出事件。

但是，在触发事件（鼠标移入）后，会导致所有的div都产生变化（所有div都触发函数并变色），这与意图不符。

于是，修改如下：

<div :class="[index == selectIndex ? 'rolesOut' : 'rolesIn']" ref="roles" v-for="(item,index) in list" :key="item.id"
    @mouseenter="changeBg(index)" @mouseleave="changeBgBack(index)">

...

data() {
    return{
        ...//数据部分已省略
        className:'rolesIn',
        selectIndex:-1
    }
}

...

methods:{
  changeBg(index){
  this.selectIndex = index;
  },
  changeBgBack(index){
  this.selectIndex = -1
  },
}

原理：设置一个动态的类（v-bind），利用三元表达式判断传入的index是否与当前元素的index相等，如果相等，则改变当前元素的类名。

这样就实现了单独选中v-for循环中的目标元素。