vue.js怎么實現選項卡切換

本篇內容主要講解“vue.js怎么實現選項卡切換”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue.js怎么實現選項卡切換”吧!

一、實現原理

我是用的點擊事件進行更改data數據的值，v-if指令根據數據的變化來顯示/隱藏內容的

1、設置1個content數組，用來存儲6個選項內容是否顯示的boolean值，默認第一個顯示

new Vue({
  el:".body",
    data:{
    a:123,
    content:[true,false,false,false,false,false]
  }
}

2、在選項內容中使用v-if指令

<div class="main-content h-100">
    <div v-show="content[0]" class="h-100 bg-warning" id="item-user">
        用戶中心
    <div v-show="content[1]" class="h-100" id="">
        內容管理
    </div>
    <div v-show="content[2]" class="h-100" id="">
         消息推送
    </div>
    <div v-show="content[3]" class="h-100" id="">
          數據統計
    </div>
    <div v-show="content[4]" class="h-100" id="">
          運營
     </div>
     <div v-show="content[5]" class="h-100" id="">
          后臺管理賬戶，權限
     </div>
</div>

3、在methods中寫一個點擊事件，根據事件的參數，把相應位置的content值為true，其他置為false

這里遇到一個錯誤，直接賦值會無效，因為data中的數組不能夠通過下標直接更改數組中的數據，要通過this.$set(this.arr,index,newVal);方法來設置，或者直接賦值新數組

new Vue({
        el:".body",
        data:{
            a:123,
            content:[true,false,false,false,false,false]
        },
        methods:{
            switchItem:function (item) {
                console.log(item)
                for (let i = 0; i <6; i++) {
                    if(i==item){
                        this.$set(this.content,i,true);
                    } else{
                        this.$set(this.content,i,false);
                    }
                }
            }
        }
 })

4、選項綁定點擊事件

<ul class="list-unstyled left-ul">
  <li class="bg-warning nav-item"><a @click="switchItem (0)" href="#person">用戶中心</a></li>
  <li class="bg-info "><a @click="switchItem (1)" href="#content">內容管理</a></li>
  <li class="bg-dark "><a @click="switchItem (2)" href="#notification">消息推送</a></li>
  <li class="bg-success "><a @click="switchItem (3)" href="#data">數據統計</a></li>
  <li class="bg-warning "><a @click="switchItem (4)" href="#operate">運營</a></li>
  <li class="bg-info"><a @click="switchItem (5)" href="#system">系統設置</a></li>
</ul>

二、實現效果

到此，相信大家對“vue.js怎么實現選項卡切換”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！