在 vue 中，實現 Tab 切換主要有三種方式：使用動態組件，使用 vue-router 路由，使用第三方插件。因為這次完成的功能只是簡單切換組件，再則覺得使用路由切換需要改變地址略微麻煩，所以使用的是動態組件實現，如果是在大型應用上，可能使用 vue-router 會方便一些。先看下最終實現的效果，結構比較簡單，頂部的三個 Tab 標簽用于切換，內容區域分別為三個子組件。

<template> // 每一個 tab 綁定了一個點擊事件，傳入的參數對應著 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 特性動態綁定子組件 // keep-alive 將切換出去的組件保留在內存中 <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 用于標識當前觸發的子組件 };},components: { // 聲明子組件 prince,rose,fox},methods: {toggleTab: function(tab) {this.currentTab = tab; // tab 為當前觸發標簽頁的組件名 }} } </script> 使用動態組件實現 Tab 標簽頁切換的基本過程可以概括為：在父組件中定義一個主 tab 標簽頁，用于切換，同時為每個 tab 綁定點擊事件，傳入該 tab 的子組件名，最后引入并定義子組件 子組件中是各 tab 標簽頁的內容 使用 is 特性動態切換子組件，使用 kee-alive 緩存 is 特性一般用于原生 HTML 元素擴展

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

這也就是為什么利用 is 特性可以實現動態切換組件的效果。

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

?

?

query實現tab切換的最簡單方式：

?

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

?

轉載于:https://www.cnblogs.com/52-qq/p/8485681.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。