當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue.js实现tab切换效果

發布時間：2025/4/16 vue 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue.js实现tab切换效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

tab切換第一步先要把HTML寫好，這個第一步很關鍵，主要分為兩塊結構

tab切換第二步寫上對應的css樣式

ul li {margin: 0;padding: 0;list-style: none;}#app {width: 600px;height: 400px;margin: 0 auto;border: 1px solid #ccc;}.tab-tilte{width: 90%;}.tab-tilte li{float: left;width: 25%;padding: 10px 0;text-align: center;background-color:#f4f4f4;cursor: pointer;}/* 點擊對應的標題添加對應的背景顏色 */.tab-tilte .active{background-color: #09f;color: #fff;}.tab-content div{float: left;width: 25%;line-height: 100px;text-align: center;}

tab切換第三步引入vue實現

<body><div id="app"><ul class="tab-tilte"><li @click="cur=0" :class="{active:cur==0}">標題一</li><li @click="cur=1" :class="{active:cur==1}">標題二</li><li @click="cur=2" :class="{active:cur==2}">標題三</li><li @click="cur=3" :class="{active:cur==3}">標題四</li></ul><div class="tab-content"><div v-show="cur==0">內容一</div><div v-show="cur==1">內容二</div><div v-show="cur==2">內容三</div><div v-show="cur==3">內容四</div></div></div><script src="./js/vue.js" type="text/javascript"></script><script type="text/javascript">var app = new Vue({el: "#app",data: {cur:0 //默認選中第一個tab}}); </script> </body>

tab切換效果改進與優化

（1）以上代碼看起來似乎很簡單容易懂，而且效果也能實現，但不夠靈活。我們可以發現如果標題和內容同時增多我們要不停的添加cur的索引值，因此我們有必要改進一下代碼的寫法。
（2）利用vue提供的v-for指令遍歷得到索引和值如下所示：

<div id="app"><ul class="tab-tit"><li v-for="(title,index) in tabTitle" @click="cur=index" :class="{active:cur==index}">{{title}}</li></ul><div class="tab-content"><div v-for="(m,index) in tabMain" v-show="cur==index">{{m}}</div></div> </div><script type="text/javascript">window.onload = function(){var app = new Vue({el:'#app',data:{tabTitle: ['標題一', '標題二', '標題三', '標題四'],tabMain: ['內容一', '內容二', '內容三', '內容四'],cur: 0 //默認選中第一個tab}})}</script> 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

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

上一篇：小程序swiper（tab）高度自适应
下一篇： vue项目-封装API接口