VueJs - 突出显示活动选项卡并在页面加载后突出显示第一个选项卡答案

【问题标题】：VueJs - Highlighting the active tab and highlighting the first tab after page loadVueJs - 突出显示活动选项卡并在页面加载后突出显示第一个选项卡
【发布时间】：2021-07-26 22:11:41
【问题描述】：

我通常会按照一定的风格来突出标签，而且我一直都可以这样做，但这次我想用不同的方式来做。这是我尝试过的方式：

TabPage.vue

**template**

 <div class="tab" @click.prevent>
 <ul>
    <li>
       <a class="is-active" @click="makeActive($event, 'Wire')" :class="{ active: isActive }">Wire</a>
    </li>
    <li>
       <a class="Connection" @click="makeActive($event, 'Connection')" :class="{ active: isActive }">Connection</a>
    </li> 
</ul>
</div>

... 

<div v-if="this.tabAct == 'Wire'>
  ...
</div>
 
**script**
 
  data(){
   ...
   tabAct: 'Wire' ,
   isActive: false,
   ...
   methods: {
     makeActive(event, item){
       this.tabAct = item
     }
   
    **style**
    
     .isActive{
       background-color: red;
       color: brown; 
      }

这里我无法突出显示活动选项卡，请告诉我如何突出显示活动选项卡，我想知道我在代码中犯了哪些错误，请我请求您发送更改。

【问题讨论】：

标签： vue.js tabs highlight

【解决方案1】：

您正在根据对以下代码的评估设置“活动”类，所以它应该是第一个：

:class="{ active: tabAct == 'Wire'}"

第二个：

:class="{ active: tabAct == 'Connection'}"

可在此处找到相关文档：https://vuejs.org/v2/guide/class-and-style.html

【讨论】：