在 vue 中，實(shí)現(xiàn) Tab 切換主要有三種方式：使用動(dòng)態(tài)組件，使用 vue-router 路由，使用第三方插件。因?yàn)檫@次完成的功能只是簡單切換組件，再則覺得使用路由切換需要改變地址略微麻煩，所以使用的是動(dòng)態(tài)組件實(shí)現(xiàn)，如果是在大型應(yīng)用上，可能使用 vue-router 會(huì)方便一些。先看下最終實(shí)現(xiàn)的效果，結(jié)構(gòu)比較簡單，頂部的三個(gè) Tab 標(biāo)簽用于切換，內(nèi)容區(qū)域分別為三個(gè)子組件。

<template> // 每一個(gè) tab 綁定了一個(gè)點(diǎn)擊事件，傳入的參數(shù)對應(yīng)著 tab 下的組件名 <div class="tabs"><div class="tab" @click="toggleTab('prince')"><a>小王子</a></div><div class="tab" @click="toggleTab('rose')"><a>小玫瑰</a></div><div class="tab" @click="toggleTab('fox')"><a>小狐貍</a></div> </div> // 子組件，顯示不同的 tab // is 特性動(dòng)態(tài)綁定子組件 // keep-alive 將切換出去的組件保留在內(nèi)存中 <prince :is="currentTab" keep-alive></prince> </template><script> // 引入子組件 import prince from './components/prince'; import rose from './components/rose'; import fox from './components/fox'; export default {name: 'app',data () {return {currentTab: 'prince' // currentTab 用于標(biāo)識(shí)當(dāng)前觸發(fā)的子組件 };},components: { // 聲明子組件 prince,rose,fox},methods: {toggleTab: function(tab) {this.currentTab = tab; // tab 為當(dāng)前觸發(fā)標(biāo)簽頁的組件名 }} } </script> 使用動(dòng)態(tài)組件實(shí)現(xiàn) Tab 標(biāo)簽頁切換的基本過程可以概括為：在父組件中定義一個(gè)主 tab 標(biāo)簽頁，用于切換，同時(shí)為每個(gè) tab 綁定點(diǎn)擊事件，傳入該 tab 的子組件名，最后引入并定義子組件 子組件中是各 tab 標(biāo)簽頁的內(nèi)容 使用 is 特性動(dòng)態(tài)切換子組件，使用 kee-alive 緩存 is 特性一般用于原生 HTML 元素?cái)U(kuò)展

舉個(gè)栗子，一般在 ul 標(biāo)簽中只能嵌套 li 標(biāo)簽，但是我們現(xiàn)在想在 ul 標(biāo)簽內(nèi)使用自定義組件 v-li。
　　<ul> ??　　<v-li></v-li> 　　</ul> 而這樣寫肯定是不行的，這就需要用到 is 特性了。 ?<ul> ? ?<li is="v-li"></li> ?</ul>

這也就是為什么利用 is 特性可以實(shí)現(xiàn)動(dòng)態(tài)切換組件的效果。

keep-alive 指令可以將切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)或避免重新渲染

?

?

query實(shí)現(xiàn)tab切換的最簡單方式：

?

<script>$("#title span").on("click",function () { // 當(dāng)你點(diǎn)擊這個(gè)菜單的時(shí)候var i = $(this).index(); // 首先獲取到他的索引值$(this).addClass("select").sibling().removeClass("select"); // 當(dāng)前選中的菜單添加select屬性，他的兄弟標(biāo)簽刪除select屬性$("#content li").eq(i).show().sibling().hide() // 內(nèi)容區(qū)的這個(gè)菜單對應(yīng)的這個(gè)索引的內(nèi)容顯示，兄弟隱藏}) </script>

?

轉(zhuǎn)載于:https://www.cnblogs.com/52-qq/p/8485681.html

總結(jié)

以上是生活随笔為你收集整理的vue-tab切换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。