v-for循环出多个元素,如何单独选中目标元素
我们经常使用vue中v-for进行元素的循环渲染,渲染之后需要添加单独的功能,这个时候就会遇到一些问题。上述代码中,我循环渲染了多个div,并添加了鼠标移入和移出事件。但是,在触发事件(鼠标移入)后,会导致所有的div都产生变化(所有div都触发函数并变色),这与意图不符。于是,修改如下:原理:设置一个动态的类(v-bind),利用三元表达式判断传入的index是否与当前元素的index相等,如果
·
我们经常使用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循环中的目标元素。
更多推荐
已为社区贡献1条内容
所有评论(0)