用vue.js实现tab切换效果

最新推荐文章于 2024-05-12 19:36:17 发布

lilly呀

最新推荐文章于 2024-05-12 19:36:17 发布

阅读量823

点赞数

分类专栏： VUE 文章标签： vue tab切换

本文链接：https://blog.csdn.net/qq_26780317/article/details/102844631

版权

VUE 专栏收录该内容

21 篇文章 4 订阅

订阅专栏

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