怎么在vue中利用v-for动态绑定class实现触发效果

本篇文章为大家展示了怎么在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> h2, h3 {  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实现触发效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。