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

Question

我通常会按照一定的风格来突出标签，我一直都能做到，但这次想换一种方式。这是我尝试过的方式：

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

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

Answer 1

您正在根据以下代码的评估设置“活动”-class，因此它应该是第一个：

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

第二个：

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

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

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

VueJs - Highlighting the active tab and highlighting the first tab after page load

tabs

highlight

vue.js