欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue 选项卡

程序员文章站 2024-03-17 20:52:10
...

方式一

单独组件,切换的是不同的组件
Vue 选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
        <style>
            body{               
                background: #f4f4f4;                
            }
            .box{width: 100%;height: 200px;background: #fff;}
        </style>
    </head>
    <body>

        <header id='head' class="" style="padding-right: 15px;">
            <p class="borderbe0 lh30 ">动态组件</p>
            <button @click="handleChangeView('a1')">李白A</button>
            <button @click="handleChangeView('b1')">鲁班七号B</button>
            <div class="box">
                <components :is="currentTabComponent"></components>
            </div>

        </header>

<script>    
            new Vue({
                el:'#head',
                data:{
                    currentTabComponent:'a1'
                },
                created:function(){
                },
                methods:{
                    handleChangeView:function(res){
                        this.currentTabComponent=res
                    }
                },
                components:{
                    a1:{
                        template:'<div>你好 靓仔 我拿buff</div>'
                    },
                    b1:{
                        template:'<div>hi 蓝天白云 我要开始送了</div>'
                    }
                }
            })
</script>
    </body>
</html>

方式二

只有一个组件,切换不同的数据
Vue 选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
        <style>
            body{               
                background: #f4f4f4;                
            }
            .flex{display: flex;}
            .flex1{flex:1;}
            .justsa{justify-content: space-around}
            .alic{align-items: center}
            .borderbe0{border-bottom:1px solid #e0e0e0; }
            .fz16{font-size: 16px;}
            .lh50{line-height: 50px;}
            .ml20{margin-left: 20px;}
            .ml10{margin-left: 10px;}
            .mr20{margin-right: 20px;}
            .borBox{box-sizing: border-box;}
            .img{width: 30px;height: 30px;}
            .colord5{color: #d50000;}
        </style>
    </head>
    <body>

        <header id='head' class="" style="padding-right: 15px;">
            <div class="flex justsa alic lh60">
                <div class="fz16" @click="select(1)" :class="active==1?'colord5':''">审核中</div>
                <div class="fz16" @click="select(2)" :class="active==2?'colord5':''">已审核</div>
                <div class="fz16" @click="select(3)" :class="active==3?'colord5':''">全部</div>
            </div>
            <div class="bordertc3 borderbc3 borBox bgf" style="margin-bottom: 1rem;">
                <list v-for='item in lists' :item='item'></list>
            </div>

        </header>

<script>    
            new Vue({
                el:'#head',
                data(){
                return {
                    lists:[{name:'江苏省',type:'李白'},{name:'江苏省',type:'阿克'},{name:'江苏省',type:'韩雪'},{name:'江苏省南京',type:'小香香'}],
                    active:1
                }
            },
            created(){

            },
            methods:{
                select(res){
                    this.active = res
                    switch(res){
                        case 1:
                            this.lists = [{name:'湖北省',type:'橘右京'},{name:'湖北省',type:'蜜月'}]
                            break;
                        case 2:
                            this.lists = [{name:'白马寺',type:'凯'},{name:'白马寺',type:'鲁班七号'}]
                            break;
                        case 3:
                            this.lists = [{name:'南华大学',type:'百里'},{name:'南华大学',type:'花蜜了'}]
                            break;
                    }

                },


            },
            components:{
                'list':{
                    props:['item'],
                    methods:{
                        goDetail(id){
                            //window.location.href='logistics-detail.html?id='+id
                        }
                    },
                    template:
                    `
                    <div class='flex alic borderbe0 fz16 lh50 ml20 borBox' @click='goDetail(item.type)'> 
                        <div class="title mr20 flex1">{{item.name}}</div>
                        <div class='flex alic'>
                            <div class="borBox lh50 fz16 border0 color6">{{item.type}}</div>
                            <img src="https://upload.chinaz.com/2018/0611/201806111628305493.jpg" class="img mr20 ml10"/>
                        </div>
                    </div>
                    `
                }
            }
            })
</script>
    </body>
</html>

王者篇:最近一手公孙离,秀的不敢拿出手,怕误伤自己人