vue中v-for通过动态绑定class实现触发效果

vue动态绑定class练习。

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

<template>
<div class="app-*">
 <ul>
  <li
   v-for="(item,i) of list"
   :key="i"
   class="item"
   @click="clickIndex=i"
   :class="{'click':i==clickIndex}"
  ></li>
 </ul>
</div>
</template>

<script>
export default {
data() {
 return {
  list: [1, 2, 3, 4],
  clickIndex: -1
 };
},
methods: {}
};
</script>
<style scoped>
.item {
display: inline-block;
width: 100px;
height: 100px;
cursor: pointer;
border: 1px solid black;
}
.item:hover {
background: gray;
}
.item.click {
background: red;
}
</style>

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

主要解决了在v-for时，如何给每个item添加动态的样式，即是说，鼠标滑动到某一项时，可以单独改变某一项的样式，同时添加按钮等操作。以及删除某一项的操作。

<template>
<div class="hello">
  <ul>
    <li  v-for="(item, itemIndex) in test"
       :key="item.id"
       :class="{defaultClass: itemIndex === isActive}"
       @mouseenter="onMouseEnter(itemIndex)"
       @mouseleave="onMouseLeave">
      {{ itemIndex+1 }} :{{ item.title }}
      <button v-if="isActive === itemIndex" @click="deleteItem(itemIndex)">删除({{itemIndex+1}})</button>
    </li>
  </ul>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
 return {
  test: [
    {  
      id: 1,
      title: 'title first'
    },
    {
      id: 2,
      title: 'title second'
    },
    {
      id: 3,
      title: 'title third'
    }
  ],
  isActive: ''
 }
},
methods: {
  onMouseEnter(index) {
    this.isActive = index
  },
  onMouseLeave() {
    this.isActive = ''
  },
  deleteItem(index) {
    this.test.splice(index, 1)
  }
},
computed: {

}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
/* display: inline-block; */
margin:10px;
}
a {
color: #42b983;
}
.defaultClass{
 background-color: red;
}
</style>

总结

以上所述是小编给大家介绍的vue中v-for通过动态绑定class实现触发效果网站的支持！

来源：https://blog.csdn.net/SilenceJude/article/details/84847451