vue同时使用两个class 一个默认，一个触发事件后添加

一只大花卷er

于 2021-03-11 18:40:27 发布

阅读量1.3k

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/m0_46401243/article/details/114676820

版权

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个Vue.js项目中实现菜单项点击时样式切换的功能。通过使用`:class`绑定来动态设置元素的样式类，实现了点击后激活状态的视觉效果。详细解析了如何在点击事件中改变数据绑定值来更新元素的样式，并解决了当多个样式存在冲突时的优先级问题。

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

<ul class="typeList"    >
<li @click="deptClick('all')" class="typeItem">
<span class="active" title="全部">全部</span></li>
<li @click="deptClick(dept.value)" class="typeItem" v-for="(dept,index) in depts">
<span :class="{selected: selectFlg === dept.value,active:activeFlg ===1}" title="$t(dept.alias)">{{dept.alias | ellipsis }}</span></li>
</ul>

主要在于

:class="{selected: selectFlg === dept.value,active:activeFlg ===1}"

当前需要，点击时触发selected样式

data() {
			return {
				activeFlg:1,
				selectFlg:null,
				}

deptClick(value) {
		  this.selectFlg =value
			},

两个样式中有冲突的属性，两个样式的触发顺序如下

   .active {
      display: block;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      color: #353b47;
      background-color: #f1f4f7;
      overflow: hidden;
      word-wrap: normal;
      white-space: nowrap;
      text-overflow: ellipsis;
      border-radius: 4px;
      cursor: pointer;
      transition: all .2s linear;
  }
  .selected{
  	background:#1890ff;
  	color: #fff;
  }