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

最新推荐文章于 2023-01-04 11:47:10 发布

一只大花卷er

最新推荐文章于 2023-01-04 11:47:10 发布

阅读量1.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/m0_46401243/article/details/114676820

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<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;
  }