前言：平常，我們遊覽網站的時候，經常會看見tab標籤的切換效果，tab切換效果在前端UI框架中也是很常見的。這次，我們在vue項目中，實現一下這個tab切換效果。
tab的切換，一般是點擊上方的標題，下方的內容塊隨之切換，上方的標題欄和下方的內容塊是並列的關係，通過標籤一一對應，點擊相對應的標籤id，來實現對應tab的切換。
一、HTML結構
tab切換第一步先要把html結構寫好，搭建頁面佈局，主要分爲兩塊結構：
<div id="app">
<ul class="tab-tilte flex_cen">
<li @click="cur=0" :class="{active:cur==0}" class="cgBox_l">分鐘</li>
<li @click="inquiryHour(cur=1)" :class="{active:cur==1}" class="cgBox_ll">小時</li>
<li @click="inquiryDay(cur=2)" :class="{active:cur==2}" class="cgBox_ll">每日</li>
<li @click="inquiryTotal(cur=3)" :class="{active:cur==3}" class="cgBox_r">彙總</li>
</ul>
<div class="tab-content">
<div v-show="cur==0">
<table>
<tbody>
<tr style="background-color:#81b5fe;color:#fff;height:40px;">
<td width="25%">開始時間</td>
<td width="25%">結束時間</td>
<td width="25%">當日<br>件數</td>
<td width="25%">當日<br>保費</td>
</tr>
<tr v-for="item in list1" :key="item.id" class="cellTr">
<td>{{item.transDate+''+item.beginTime}}</td>
<td>{{item.transDate+''+item.endTime}}</td>
<td>{{item.polnumByMinute}}</td>
<td>{{item.premByMinute}}</td>
</tr>
</tbody>
</table>
</div>
<div v-show="cur==1">
<table>
<tbody>
<tr class="trFirst" style="height:40px;">
<td width="25%">開始時間</td>
<td width="25%">結束時間</td>
<td width="25%">當日<br>件數</td>
<td width="25%">當日<br>保費</td>
</tr>
<tr v-for="item in list2" :key="item.index" class="cellTr">
<td>{{item.transDate+''+item.beginTime}}</td>
<td>{{item.transDate+''+item.endTime}}</td>
<td>{{item.polnumByHour}}</td>
<td>{{item.premByHour}}</td>
</tr>
</tbody>
</table>
</div>
<div v-show="cur==2">
<table>
<tbody>
<tr style="background-color:#81b5fe;color:#fff;height:40px;">
<td width="33.33%">時間</td>
<td width="33.33%">件數</td>
<td width="33.33%">保費</td>
</tr>
<tr v-for="item in list3" :key="item.id" class="cellTr">
<td>{{item.transDate}}</td>
<td>{{item.polnumByDay}}</td>
<td>{{item.premByDay}}</td>
</tr>
</tbody>
</table>
</div>
<div v-show="cur==3">
<table>
<tbody>
<tr class="trFirst" style="height:40px;">
<td width="50%">當日件數</td>
<td width="50%">當日保費</td>
</tr>
<tr v-for="item in list4" :key="item.index" class="cellTr">
<td>{{item.polnumTotal}}</td>
<td>{{item.premTotal}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
二、script部分
<script>
export default{
created(){
//分鐘
this.GLOBAL.get("policy/query/dataReport?reqType=4",'',(res,sta)=> {
if(sta == 1){
this.list1 = res.result;
this.list2 = [];
this.list3 = [];
this.list4 = [];
console.log("請求成功");
}else if(sta == 0){
this.GLOBAL.showToast('查詢不到，請重試！');
console.log("請求失敗");
}
});
},
methods:{
//小時
inquiryHour(){
this.GLOBAL.get("policy/query/dataReport?reqType=3",'',(res,sta)=>{
if(sta == 1){
this.list2 = res.result;
this.list3 = [];
this.list4 = [];
console.log("請求成功");
}else if(sta == 0){
this.GLOBA.showToast('查詢不到，請重試！')
console.log("請求失敗");
}
});
},
//每日
inquiryDay(){
this.GLOBAL.get("policy/query/dataReport?reqType=2",'',(res,sta) => {
if(sta == 1){
this.list3 = res.result;
this.list2 = [];
this.list4 = [];
console.log("請求成功");
}else if(sta == 0){
this.GLOBAL.showToast('查詢不到，請重試！');
console.log("請求失敗");
}
});
},
//彙總
inquiryTotal(){
this.GLOBAL.get("policy/query/dataReport?reqType=1",'',(res,sta) =>{
if(sta == 1){
this.list4 = res.result;
this.list2 = [];
this.list3 = [];
console.log("請求成功");
}else if(sta == 0){
this.GLOBAL.showToast('查詢不到，請重試！')
console.log("請求失敗");
}
});
},
},
mounted(){
},
data(){
return{
cur:0,
list1:[],
list2:[],
list3:[],
list4:[],
};
},
};
</script>
三、樣式部分
<style scope>
header>img{display: block;max-width:100%;height:auto;}
.red{color:red;font-size:16px;padding-left:5px;}
.totalMon,.total-right{font-weight: bold;font-size: 16px;}
.dataTitle{margin-bottom:10px;}
.cgBox_l,.cgBox_r,.cgBox_ll{width: 22%;display: inline-block;height: 34px;line-height: 34px;text-align: center;font-size: 14px;background: #fff;color: #333;border: 1px solid #81b5fe;}
.cgBox_l {border-top-left-radius: 17px;border-bottom-left-radius: 17px;}
.cgBox_r {border-top-right-radius: 17px;border-bottom-right-radius: 17px;}
.tab-tilte .active{background: #81b5fe;color: #fff;}
.nowDate{text-align: right;padding-top: 15px;display: block;font-size: 16px;}
table{width:100%;border:1px solid #666;margin-top: 6px;border-spacing: 0;border-collapse: collapse;text-align: center;}
.input-line{height: 30px;margin-bottom: 10px;}
.trFirst{background-color:#81b5fe; color:#fff;}
.tr-total{color:red;font-weight: bold;}
tr:nth-child(2n){background:#e0ecfb;}
td{border: 1px solid #ccc;}
.cellTr{height:30px;}
</style>
四、tab切換效果改進語優化
（1）可以發現當標題和內容不斷增多時，我們要不停的添加cur的索引值，因此，有必要改進一下代碼的寫法；
（2）利用vue提供的v-for指令遍歷得到索引和值，如下所示：
<div id="app">
<ul class="tab-list">
<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>
參考博客：09Vue.js實現tab切換效果--簡書 https://www.jianshu.com/p/52441745d769
如上如有問題，歡迎留言指正，謝謝。
版權聲明：本文爲博主原創文章，未經博主允許不得轉載 。