v-for循环出多个元素，如何单独选中目标元素
我们经常使用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循环中的目标元素。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！