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

我们经常使用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循环中的目标元素。