精华内容
下载资源
问答
  • vue选项卡

    2019-10-11 20:53:08
    vue选项卡 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> .....

    vue选项卡

    效果:
    在这里插入图片描述

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/vue.js"></script>
        <style>
            * {
                padding:0;
                margin: 0;
                margin: 0 auto;
            }
            .changeColor {
                background: deepskyblue;
                color:white;
            }
            .color {
                background:#cccccc;
                color:black;
            }
            .size {
                width:402px;
                height:402px;
                border:1px solid red;
                text-align:center;
            }
            span {
                /*display:inline-block;*/
                width: 60px;
                float: left;
                padding:20px;
                background:#cccccc;
                /*border:1px solid red;*/
            }
        </style>
    </head>
    <body>
    <div id="app" class="size">
    
        <span v-for="(item,index) of arr"
              :class="{changeColor:ind == index}"
              @click="change(index)">{{item}}</span>
        <p>{{arr[ind]}}</p>
    
    </div>
    </body>
    </html>
    <script>
        new Vue({
            el:'#app',
            data:{
                ind:0,
                arr:['html','css','javascript','vue']
            },
            methods:{
                change(index){
                    this.ind = index;
                }
            }
        })
    </script>
    
    展开全文
  • vue 选项卡

    2021-01-18 10:10:16
    <div id="box">... 添加了cur类名,a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式--> <div class="tab-tit"> <a href="javascript:;" @click=".
    <div id="box">
             <!--点击设置msg的值  如果msg等于0,第一个a添加cur类名,如果msg等于1,第二个a添加cur类名,以此类推。
                添加了cur类名,a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式-->
            <div class="tab-tit">
                <a href="javascript:;" @click="msg=0" :class="{'cur':msg===0}">html</a>
                <a href="javascript:;" @click="msg=1" :class="{'cur':msg===1}">css</a>
                <a href="javascript:;" @click="msg=2" :class="{'cur':msg===2}">javascript</a>
                <a href="javascript:;" @click="msg=3" :class="{'cur':msg===3}">vue</a>
            </div>
                <!--根据msg的值显示div,如果msg等于0,第一个div显示,其它三个div不显示。
                    如果msg等于1,第二个div显示,其它三个div不显示。以此类推-->
            <div class="tab-con">
                <div v-show="msg===0">
                    html
                </div>
                <div v-show="msg===1">
                    css
                </div>
                <div v-show="msg===2">
                    javascript
                </div>
                <div v-show="msg===3">
                    vue
                </div>
            </div>
    </div>
    <script>
            data: {
                msg: 0
            }
    </script>
    #box{
        width: 600px;
        margin: 0 auto;
    }
    .tab-tit{
        font-size: 0;
        width: 600px;
    }
    .tab-tit a{
        display: inline-block;
        height: 50px;
        line-height: 50px;
        width: 25%;
        font-size: 18px;
        text-align: center;
        background: #ccc;
        color: #333;
        text-decoration:none;
    }
    .tab-tit .cur{
        background: #09f;
        color: #fff;
    }
    .tab-con div{
        border: 1px solid #ccc;
        height: 400px;
        width: 598px;
        margin: 0 auto;
        padding-top: 20px;
    }

     

    展开全文
  • Vue选项卡

    2021-03-11 18:54:13
    <div id="app"> <div class="tabs"> <ul class="tab flex"> (item,index) in data">{{item.title}}</li> </ul> <ul class="content"> (item,index) in data">{{item.content}}</li> </ul> </div> </div> new Vue({ ...
        <div id="app">
            <div class="tabs">
                <ul class="tab flex">
                    <li @click="activeIndex=index" 
                    :class="{active:activeIndex===index}" 
                    v-for="(item,index) in data">{{item.title}}</li>
                </ul>
                <ul class="content">
                    <li v-show="activeIndex===index" 
                    v-for="(item,index) in data">{{item.content}}</li>
                </ul>
            </div>
        </div>
    
    new Vue({
        el:"#app",
        data() {
              return {
                    //高亮索引
                    activeIndex:0,
                    data:[{
                        title:"中国",
                        content:"中国的乒乓球很厉害"
                     },{
                         title:"美国",
                         content:"美国的篮球很厉害"
                      },{
                          title:"德国",
                          content:"德国的汽车质量很棒"
                      },{
                           title:"英国",
                           content:"英国的天气变化无常"
                      }]
                   }
                },
            })
    
    展开全文
  • Vue 选项卡

    2018-07-19 14:41:56
    Vue({ el: '#head' , data:{ currentTabComponent: 'a1' }, created: function () { }, methods:{ handleChangeView: function (res) { this .currentTabComponent=res } }, components:{ a1:{ ...

    方式一

    单独组件,切换的是不同的组件
    这里写图片描述

    <!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/vue@2.5.16/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>
    

    方式二

    只有一个组件,切换不同的数据
    这里写图片描述

    <!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/vue@2.5.16/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>
    

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

    展开全文
  • Vue选项卡案例

    2018-10-18 15:24:15
    简单的做了一个Vue选项卡和任务分类Demo,非常适合初学者
  • Vue 选项卡效果

    2019-11-16 20:19:56
    用Vue实现选项卡效果。 效果演示 点击CSS 点击Vue 看起来是不是有点菜单导航的感觉,下面跟随我一起来一探究竟? 代码演示 **注意:**引入Vue.js架包 <!DOCTYPE html> <...Vue选项卡...
  • 主要为大家详细介绍了vue选项卡切换登录方式小案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue选项卡组件 @ fracto / vue-credit卡 (@fracto/vue-credit-card) Another Credit Card Component for VueJS. VueJS的另一个信用卡组件。 特征 (Features) Note: Localization supports only Turkish & ...
  • vue选项卡封装组件

    2018-10-10 10:59:30
    根据vue实战,练习封装选项卡组件,代码里面有清晰的注释,不了解密我

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 980
精华内容 392
关键字:

vue选项卡

vue 订阅