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: {
   onm ouseEnter(index) {
     this.isActive = index
   },
   onm ouseLeave() {
     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实现触发效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持！

本文来自：http://www.q1010.com/184/6400-0.html

注：关于vue中v-for通过动态绑定class实现触发效果的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js