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

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

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

无法单独选取当前元素!

例如:(data、methods部分已省略)

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

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

于是,修改如下:

...data() {return{...//数据部分已省略className:'rolesIn',selectIndex:-1}
}...methods:{changeBg(index){this.selectIndex = index;},changeBgBack(index){this.selectIndex = -1},
}

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

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