vue中给v-for渲染的元素动态添加移除类名

最新推荐文章于 2023-01-17 16:01:32 发布

Mr-bug-mly

最新推荐文章于 2023-01-17 16:01:32 发布

阅读量2.4k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue中给v-for渲染的元素动态添加移除类名

本文链接：https://blog.youkuaiyun.com/qq_42789447/article/details/89848537

在Vue项目中，要实现点击li改变颜色，其他li取消颜色的效果。原本想用jQuery实现，但无法获取v-for的数据和dom节点。后采用V-bind方法，在data里声明属性，在元素中添加动态class，给元素添加点击事件传入index赋值给声明属性，文中还展示了完整代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中给v-for渲染的元素动态添加移除类名

今天在项目中需要做一个效果，点击对应的li改变当前的color，其他的li取消颜色，在jQuery中这很容易，由于之前已经引入了jQuery，所以直接想到了这个办法。
但是出于未知的原因，jQuery获取不到v-for出来的数据，根本找不到dom节点，所以不得不改变思路。

然后我想到了V-bind的方法。下面贴上步骤。
1.在data里面生明一个属性，默认值最好为数字类型，并且不得大于当前元素+所有兄弟元素的length，可以默认为0（第一个元素选中）

 current: '0', //如果不想默认被选中，就把值设为一个超出所有元素length的数字

2.在当前元素中添加动态class： “:class”，根据vue的class和style的绑定特性写出类似“v-bind:class="{ classred:index==current}"”，当然其他方法很多，可以根据文档自行选择

<ul class="list">
        <li v-for="(item,index) in list" :key="index" @click="handleList(index)" :class="{red:index==current}">{{item.name}}</li>
        ‘red’是你要给的类名 
</ul>

3.给元素点击事件，传入当前元素的index，把元素当前的index赋值给data里面的申明的属性

 handleList (index) {
      this.current = index;
    },

这样就大功告成了，下面展示完整代码

<!--  -->
<template>
  <div>
    <ul>
      <li v-for="(item,index) in liList"  v-on:click="addClass(index)" v-bind:class="{ classred:index==current}">{{item.name}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  components: {},
  data () {
    return {
      liList:[
        {name:'张三'},
        {name:'李四'},
        {name:'王五'}
      ],
      current:0,
    };
  },
  methods: {
	    addClass:function(index){ 
	      	this.current=index;
	 	}
   }
}

</script>
<style scoped>
  .classred{ color:red; }
</style>