利用Vue實現簡易tab切換效果
1.1 在我們平時瀏覽網站的時候，經常看到的特效有圖片輪播、導航子菜單的隱藏、tab標簽的切換等等。這段時間學習了vue后，開始要寫出一些簡單的特效。
1.2 實現思路是點擊上方的標題，下方的內容隨之發生改變，上方和下方用的是兩個塊，是兄弟節點，所以需要點擊tab標題和下方內容一一對應，基予兩個模塊若下標相同是一個內容實現的。
1.3 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>
1.4 tab切換第二步寫上對應的css樣式
<style type="text/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; } </style>
1.5tab切換第三步引入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>
效果圖：
1.6tab切換效果改進與優化
（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>
最終效果圖如下：
