vue动态新增修改删除class切换面板

目录

• • 前言
  • 代码实现

前言

• 界面是这样的
  

• 我想实现的效果，如果切换之后下面有一条横线。

代码实现

• HTML代码

 <div :class="tabMenuItemClass(0)" @click="changePanel(0)">面板一</div>
 <div :class="tabMenuItemClass(1)" @click="changePanel(1)">面板二</div>
 <div :class="tabMenuItemClass(2)" @click="changePanel(2)">面板三</div>
...省略CSS...

• js代码

 ...省略...
   data() {
    return {
    // 先声明选择哪个面板，默认0就第一个
      activePanel: 0,
    };
  },
  ... 省略...

  methods: {
  //样式
    tabMenuItemClass(index) {
      const normal = "tab_item_text";
      const active = "tab_item_text tab_item_text_active";
      // 如果相等
      if (this.activePanel === index) {
      	// 则使用选中的样式
        return active;
      }
      return normal;
    },
    // 切换面板
    changePanel(index) {
      this.activePanel = index;
    },
  },
  

• css

  .tab_item_text {
 	position: relative;
     color: #707070;
     font-size: 18px;
     margin-right: 30px;
     padding-bottom: 15.5px;

     -webkit-box-align: center;
     align-items: center;
     display: inline-flex;
     font-weight: 600;
     transition: border .2s linear;
     width: max-content;
     }
 .tab_item_text_active {
          border-bottom: 2px solid;
          text-decoration: none;
           color: #191919;
 }

• 效果