vue 给当前项动态添加class 的几种情况

最新推荐文章于 2025-06-11 19:50:48 发布

伟笑

最新推荐文章于 2025-06-11 19:50:48 发布

阅读量1.2w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue2 文章标签： vue

原文链接：https://blog.youkuaiyun.com/sxjit/article/details/105179075

Vue2 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了在Vue.js中如何使用v-for循环和动态绑定class来实现元素的高亮显示。通过监听点击事件，改变data中的标识来切换激活的元素，并通过class的条件判断添加active-class。示例代码包括循环和非循环两种情况，适用于列表和固定数量的元素。

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

一. v-for循环情况下动态添加：

1.v-for循环元素，绑定key
2.在data中创建标识isActive=0，这是为了初始化第一个标题为active
3.监听单击事件触发方法，传入点击元素的index改变标识
4.绑定class属性，判断当(index===标识)时添加active-class

<ul>
  <li v-for="(item,index) of list" :key="index" 
  :class="{active: isActive === index}"
  @click="changeClass(index)">{{item}}</li>
</ul>

data() {
  return {
    list: ["标题一","标题二","标题三"],
    isActive: 0
  }
},
methods: {
  changeClass(i) {
    this.isActive = i;
  }
}

.active {
  color: red;
}

二.非循环情况下动态添加：

跟方法一循环情况同理，只不过将循环的动态index更改为固定的编号，将class的判断条件更改为(isActive === 编号)。同样的，在点击事件触发时传入编号更改标识。

<ul>
  <li :class="{active: isActive === 1}" @click="changeClass(1)">标题一</li>
  <li :class="{active: isActive === 2}" @click="changeClass(2)">标题二</li>
  <li :class="{active: isActive === 3}" @click="changeClass(3)">标题三</li>
</ul>

data() {
  return {
    isActive: 1
  }
},
methods: {
  changeClass(i) {
    this.isActive = i;
  }
}