vue.js實現(xiàn)選項卡切換

更新時間：2022年03月01日 14:36:51 作者：軒轅秋風淚

這篇文章主要為大家詳細介紹了vue.js實現(xiàn)選項卡切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

因為前端課要交一個大作業(yè)，剛好工作室的項目需要一個后臺管理界面，就自學了一下vue，今天做了一個選項卡切換，最開始的作為菜雞是用的js做的，太難了T.T，后面學了bootstrap就直接用的組件。今天用了感覺太棒了！比bootstrap的組件好用?。?！

一、實現(xiàn)原理

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

1、設置1個content數(shù)組，用來存儲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="">
? ? ? ? ? 數(shù)據(jù)統(tǒng)計
? ? </div>
? ? <div v-show="content[4]" class="h-100" id="">
? ? ? ? ? 運營
? ? ?</div>
? ? ?<div v-show="content[5]" class="h-100" id="">
? ? ? ? ? 后臺管理賬戶，權限
? ? ?</div>
</div>

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

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

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">數(shù)據(jù)統(tǒng)計</a></li>
? <li class="bg-warning "><a @click="switchItem (4)" href="#operate">運營</a></li>
? <li class="bg-info"><a @click="switchItem (5)" href="#system">系統(tǒng)設置</a></li>
</ul>