class根据状态 vue_vue中v-for通过动态绑定class实现触发效果

vue动态绑定class练习。

：class=“{ ‘类名1'：条件表达式，‘类名2'：条件表达式… }”

• v-for="(item,i) of list"

  :key="i"

  class="item"

  @click="clickIndex=i"

  :class="{'click':i==clickIndex}"

  >

export default {

data() {

return {

list: [1, 2, 3, 4],

clickIndex: -1

};

},

methods: {}

};

.item {

display: inline-block;

width: 100px;

height: 100px;

cursor: pointer;

border: 1px solid black;

}

.item:hover {

background: gray;

}

.item.click {

background: red;

}

补充：vue之v-for中给每个item动态绑定class，动态添加元素，动态删除某个元