vue實(shí)現(xiàn)標(biāo)簽頁切換/制作tab組件詳細(xì)教程
vue實(shí)現(xiàn)標(biāo)簽頁切換【詳細(xì)】
在vue中實(shí)現(xiàn)標(biāo)簽頁切換有如下2種方式：
① 使用動態(tài)組件
② 使用路由
當(dāng)然你可以使用第三方ui來實(shí)現(xiàn)，比如Element Plus。不過自己試著實(shí)現(xiàn)一下會更好。
這里講一下第一和第二種方式，以組件實(shí)現(xiàn)為重點(diǎn)，那么就先講一下使用路由的方式。
使用路由實(shí)現(xiàn) Tab切換
首先，在router文件夾的index.js文件中，配置子頁面的路由
{
path: '/Profile',
name: 'Profile',
meta:{
showHead:true,
path:'個人中心'
},
component: () => import('../views/ProfileView.vue'),
children:[
{
path:'article',
name:'article',
component: () => import('../components/Article.vue')
},
{
path:'picture',
name:'picture',
component: () => import('../components/Picture.vue')
}
]
},
以防萬一你不知道，path使用‘/xx’的是根路徑，使用’xxx‘會自動拼接。
以 / 開頭的嵌套路徑將被視為根路徑。這允許你利用組件嵌套，而不必使用嵌套的 URL。
接著放出我們的組合拳與
<div class="column">
<router-link to="/profile/article" name="article">文章</router-link>
<router-link to="/profile/picture" name="picture">圖片</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
使用 component 動態(tài)組件實(shí)現(xiàn) Tab切換
大概的思路是這樣的：首先，每一個ｔａｂ都有一個ｐａｎｅｌ。
其次，我們希望ｔａｂ和他的ｐａｎｅｌ能夠關(guān)聯(lián)起來，那么他們之間最好有什么相同的特征，所以我們就想到了ｉｄ。我們可以給每組的男嘉賓和女嘉賓都用上相同的編號，這樣我們只需要看編號就知道誰對應(yīng)誰啦！
最后，大家都知道，約會是一對一的。因此，我們男一(mtab-1)和女一(panel-1)約會的時候，其他的女嘉賓是不能出場的。
控制組件的顯示隱藏可以用v-if/v-show。
用isShow來記錄當(dāng)前出場的男嘉賓(mtab)。
用數(shù)組panelShowList來記錄每位女嘉賓(panel)是否出場的。
大概的框架是這樣的：
<div class="column">
<button class="mtab" id="mtab-0" @click="clickTab">0</button>
<button class="mtab" id="mtab-1" @click="clickTab">1</button>
<button class="mtab" id="mtab-2" @click="clickTab">文章</button>
</div>
<div class="content">
<div class="panel" id="panel-0" v-if="panelShowList[0]">
我是內(nèi)容
</div>
<div class="panel" id="panel-1" v-if="panelShowList[1]">
我是內(nèi)容1
</div>
<div class="panel" id="panel-2" v-if="panelShowList[2]">
我是內(nèi)容2
</div>
</div>
不要忘記isShow和panelShowList是有初始值的。開場男女嘉賓，安排！
data(){
return{
isShow:0,
panelShowList:[1,0,0]
}
}
差點(diǎn)忘了要給出場男嘉賓一個特寫，給被選中的ｔａｂ增加一些醒目的樣式。
<div class="column">
<button class="mtab" id="mtab-0" @click="clickTab" :class="{highlightTab:panelShowList[0]}">0</button>
<button class="mtab" id="mtab-1" @click="clickTab" :class="{highlightTab:panelShowList[1]}">1</button>
<button class="mtab" id="mtab-2" @click="clickTab" :class="{highlightTab:panelShowList[2]}">文章</button>
</div>ps: panelShowList存儲了女嘉賓們的出場狀態(tài)，數(shù)組下標(biāo)為男女嘉賓相同的編號。
接著，我們開始思考怎么樣才能讓ｔａｂ和ｐａｎｅｌ這兩邊的嘉賓能夠成雙成對的出現(xiàn)呢？
答：那當(dāng)然得讓他們相互牽手成功！
前面我們已經(jīng)在雙方的ｉｄ上做好了手腳，那么現(xiàn)在就簡單了。
首先，獲取男方的ｉｄ，不對，是tab的id。
clickTab(e){
console.log('我的編號是',e.srcElement.id.charAt(5))
this.isShow = e.srcElement.id.charAt(5)
接著我們需要主持人來呼喚女嘉賓出場，不是。是利用watch偵聽器對isShow屬性的監(jiān)聽。只要isShow改變就代表當(dāng)前出場的男嘉賓改變了，因此立馬通知前一位女嘉賓退場，對應(yīng)的女嘉賓出場。
watch:{
isShow(newValue,oldValue){
this.panelShowList[oldValue]=0
this.panelShowList[newValue]=1
}
}
這里我們擴(kuò)展一個知識點(diǎn)，那就是watch的深層監(jiān)聽。
watch 默認(rèn)是淺層的：被偵聽的屬性，僅在被賦新值時，才會觸發(fā)回調(diào)函數(shù)——而嵌套屬性的變化不會觸發(fā)。如果想偵聽所有嵌套的變更，你需要深層偵聽器：
ok，到了這里，我們就成功實(shí)現(xiàn)了標(biāo)簽頁切換功能。
總結(jié)
到此這篇關(guān)于vue實(shí)現(xiàn)標(biāo)簽頁切換/制作tab組件的文章就介紹到這了,更多相關(guān)vue標(biāo)簽頁切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3中輕松實(shí)現(xiàn)switch功能組件的全過程
這篇文章主要給大家介紹了關(guān)于vue3中輕松實(shí)現(xiàn)switch功能組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue-router 類似Vuex實(shí)現(xiàn)組件化開發(fā)的示例
本篇文章主要介紹了Vue-router 類似Vuex實(shí)現(xiàn)組件化開發(fā)的示例，具有一定的參考價值，有興趣的可以了解一下2017-09-09
這篇文章主要介紹了vue中jsonp的使用方法,文章從安裝開始展開具體的vue中jsonp的使用詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助2021-11-11
這篇文章主要給大家介紹了關(guān)于Vue生命周期的那些事,在使用vue開發(fā)過程中經(jīng)常會接觸到生命周期的問題,但對于每個鉤子函數(shù)都做了什么,應(yīng)用場景比較模糊,希望通過這次梳理讓自己清楚一些,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue?動畫效果、過渡效果,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽屬性的使用和區(qū)別解析
這篇文章主要介紹了Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽屬性的使用和區(qū)別,本文通過示例代碼給大家介紹的非常詳細(xì)對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue限制文本框輸入數(shù)字的正確姿勢，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了關(guān)于Element-UI中slot的用法及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了解決vue表單為空也能提交的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue使用jsmind實(shí)現(xiàn)生成腦圖的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何使用jsmind實(shí)現(xiàn)生成腦圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-03-03