Vue tab选项卡

最新推荐文章于 2022-02-09 15:41:47 发布

king19990102

最新推荐文章于 2022-02-09 15:41:47 发布

阅读量262

点赞数

分类专栏： html Vue tab选卡卡

本文链接：https://blog.csdn.net/qq_34997333/article/details/106588034

版权

html 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

tab选卡卡

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://fsc.hzxy.edu.cn/css/leftnav2.css" >

<title>vue生命周期</title>
<style>
   .my-container{
       display: flex;
       align-items: center;
       flex-direction: column;
   }
   .my-tab{
       margin: 25px 0;
   }
   .tab-title{
        position: relative;
        left: 0;
        height: 40px;
        white-space: nowrap;
        font-size: 0;
       
        transition: all .2s;
        -webkit-transition: all .2s;
        list-style-type: none;
   }
   .tab-title li{
        display: inline-block;
        *display: inline;
        *zoom: 1;
        vertical-align: middle;
        font-size: 14px;
        transition: all .2s;
        -webkit-transition: all .2s;
        position: relative;
        line-height: 40px;
        min-width: 65px;
        padding: 0 30px;
        text-align: center;
        cursor: pointer;
   }
   .none{
       display: none;
   }
   .content{
       padding: 0px;
   }
   .this{
        color: #5B238E;
        font-size: 18px;
        font-weight: 600;
   }
   .this::after{
        border: none;
        border-radius: 0;
        border-bottom: 2px solid #5B238E;position: absolute;
        left: 0;
        top: 0;
        content: '';
        width: 100%;
        height: 41px;
        box-sizing: border-box;
        pointer-events: none;
   }

</style>
</head>

<body>
    <div id="app" class="my-container">
       <tabs :data="title" ></tabs>
    </div>
</body>
<script src="http://fsc.hzxy.edu.cn/js/jquery-3.2.1.min.js" ></script>
<script src="http://fsc.hzxy.edu.cn/js/bootstrap.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('tabs',{
    props: ['data'],
    data(){
        return {
            active : 0
        }
    },
    methods: {
            toggle(e){
                console.log(e);
                this.active = e
            }
        },
    template: `<div class="my-tab"> 
                    <ul class="tab-title">
                        <li v-for="(item, index) in data" :key="index"   @click="toggle(index)" :class="[active === index ? 'this' :'']">{{item.text}}</li>
                    </ul>  
                    <div class="content">
                        <div class="tab-item" v-for="(item,index) in data" :class="[active === index ? 'tab-item' :'none']">
                            <img :src="item.url" width="400px" style="margin-top: 30px;margin-left: 50px;">
                        </div>
                    </div>
                </div>`      
    })
    let vm  = new Vue({
        el: '#app',
       
        data(){
            return{
               title:[
                   {text:"阿米娅爱你哟",url:"http://lumsn.gicp.net:2001/static/1.jpeg"},
                   {text:"推进之王爱你哟",url:"http://lumsn.gicp.net:2001/static/2.png"},
                   {text:"日光爱你哟",url:"http://lumsn.gicp.net:2001/static/3.jpeg"},
                   {text:"艾妮爱你哟",url:"http://lumsn.gicp.net:2001/static/4.png"},
               ]
            }
        },
       
      
    });

</script>


</html>