在實現這個功能時借鑑的原博主的方法沒有實現切換變色，琢磨了好久終於知道了怎麼切換變色（小菜鳥的咆哮）！！！記錄下來以供參考，以下是的完整tab頁切換並變色的程式碼框架。

​<template>
<div >
     //tab頁切換按鈕部分
      <ul >
        <li v-for="(item,index) in navList" :claswww.cppcns.coms = "{active:!(index- 
            menuIndex)}" @click = 'menuShow(index)'>
          <a href="#" rel="external nofollow" >{{item}}</a>
        </li>
      </ul>
 
   //內容主體部分
   <div v-show = 'menuIndex == 0'>內容一 <!--此處可以www.cppcns.com
 
換成子元件--></div>
   <div v-show = 'menuIndex == 1'>內容二 <!--此處可以換成子元件--></div>
</div>
</template&www.cppcns.comgt;
 
<script type="text/">
export default {
data(){
      return {
         menuIndex:0,navList:['中介軟體詳情','部署架構'],}
            }
   methods: {
      menuShow (index) {
        this.menuIndex = index
        console.log(this.menuIndex)
      }
}
</script>
//樣式
<style scoped>
//點選切換顏色，我設定的為藍色
  .active{
    backgroundhttp://www.cppcns.com
 
-color: rgba(13,175,255,0.33);
    }
<style>

切換顏色就是這個

.active{
//背景色
  background-color: rgba(13,0.33);
//字型色
color：red；
  }

以下是效果圖：

點選中介軟體詳情：

效果圖：

點選部署架構：

到此這篇關於Vue. 實現tab切換並變色操作講解的文章就介紹到這了,更多相關Vue.js 實現tab切換並變色內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！