用vue.js实现tab切换效果

mac2024-08-09 51

前言：平常，我们游览网站的时候，经常会看见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部分

三、样式部分

四、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>