前言

来说说在vue中给v-for动态渲染出来的元素添加类名。可以来实现一个点击某个动态元素给其添加类名，让它突出显示样式。

template

<ui>
    <li
     class"click_item"
     :class="isActive === index ? "active" : ''"
     v-for="(items, index) in list"
     key="items.code"
     @click="hanleClick(index)"
    >
    </li>
</ui>

这里使用v-for来循环list动态添加li元素，同时我们希望点击某个li元素时，动态给被点击的元素添加样式。v-for的index属性添加进来，同时点击事件传入index

script

data() {
     isActive: false,
     list: [],
},

method: {
     handlClick(index) {
             this.isActive = index
     }
}

这里在data中定义isActive默认值是false，接着在method里把当前点击的元素索引传给该事件的判定条件isActive。让isActive在template里去判断是否跟循环中的某个元素索引相等，这里有个短路运算，如果索引相等则表示当前点击事件的元素就是和循环中的某个索引对应的元素，这时候给该索引对应的元素添加active类名，如果不是则不添加。

style

<style less scoped>
    .check_item {
         color: #fff;
         &.active {
               color: #djejjd;
               background-color: #ejdnn;
         }
    }
    .check_item:hover {
          color: #rkkkk;
          background-color: #ejdnn;
    }
</style>

这里设置默认的字体颜色，然后设置点击后的元素的样式，使用&符号表示并集选择器，不用再写一遍类名了。
设置li元素hover上去的样式。