Vue.js VueJs-高亮显示活动选项卡，并在页面加载后高亮显示第一个选项卡

我通常按照某种风格来突出显示标签，我一直都能做到，但这次我想用不同的方式来做。以下是我尝试过的方法：

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

**模板**


电线


联系


... 
您正在根据对以下代码的求值设置“active”类，因此它应该是第一个：

：class=“{active:tabAct=='Wire'}”

第二点：

：class=“{active:tabAct=='Connection'}”

相关文档可在此处找到：