Vue.js实现tab切换效果
生活随笔
收集整理的這篇文章主要介紹了
Vue.js实现tab切换效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
tab切換第一步先要把HTML寫好，這個第一步很關鍵，主要分為兩塊結構
<div id="app"><ul class="tab-tilte"><li>標題一</li><li>標題二</li><li>標題三</li><li>標題四</li></ul><div class="tab-content"><div>內容一</div><div>內容二</div><div>內容三</div><div>內容四</div></div></div>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指令遍歷得到索引和值 如下所示：
總結
以上是生活随笔為你收集整理的Vue.js实现tab切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小程序swiper（tab）高度自适应
- 下一篇： vue项目-封装API接口