日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

Vue.js实现tab切换效果

發(fā)布時間：2025/4/16 54 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Vue.js实现tab切换效果 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

tab切換第一步先要把HTML寫好，這個第一步很關(guān)鍵，主要分為兩塊結(jié)構(gòu)

<div id="app"><ul class="tab-tilte"><li>標題一</li><li>標題二</li><li>標題三</li><li>標題四</li></ul><div class="tab-content"><div>內(nèi)容一</div><div>內(nèi)容二</div><div>內(nèi)容三</div><div>內(nèi)容四</div></div></div>

tab切換第二步寫上對應(yīng)的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;}/* 點擊對應(yīng)的標題添加對應(yīng)的背景顏色 */.tab-tilte .active{background-color: #09f;color: #fff;}.tab-content div{float: left;width: 25%;line-height: 100px;text-align: center;}

tab切換第三步引入vue實現(xiàn)

<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">內(nèi)容一</div><div v-show="cur==1">內(nèi)容二</div><div v-show="cur==2">內(nèi)容三</div><div v-show="cur==3">內(nèi)容四</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切換效果改進與優(yōu)化

（1） 以上代碼看起來似乎很簡單容易懂，而且效果也能實現(xiàn)，但不夠靈活。我們可以發(fā)現(xiàn)如果標題和內(nèi)容同時增多我們要不停的添加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: ['內(nèi)容一', '內(nèi)容二', '內(nèi)容三', '內(nèi)容四'],cur: 0 //默認選中第一個tab}})}</script> 《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

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

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