码迷，mamicode.com
首页 > 其他好文 > 详细

vue实现选项卡切换效果

时间：2018-11-21 10:23:58      阅读：197      评论：0      收藏：0      [点我收藏+]

标签：原理   com   传统   math   显示   ora   void   天猫   tle   

效果如下：

技术分享图片

说明：

这里我使用的原理是利用vue中的v-show/显示隐藏指令，当为true的时候显示，为false的时候隐藏

1html代码：

<head>
    <meta charset="UTF-8">
    <base target="_blank">
    <title>vue实现选项卡切换效果</title>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--主体内容-->
    <div class="center">
        <!--Tap选项卡部分-->
        <div class="center-left-tap">
            <a href="javascript:void (0)" style="color: #1c1c1c;" class="current" @click="mt1">最新</a>
            <a href="javascript:void (0)" class="a-hover" @click="mt2">B2C</a>
            <a href="javascript:void (0)" class="a-hover" @click="mt3">C2C</a>
            <a href="javascript:void (0)" class="a-hover" @click="mt4">传统零售</a>
            <a href="javascript:void (0)" class="a-hover" @click="mt5">其他</a>
        </div>
        <div class="container" id="container01">
            <!--第一个 最新-->
            <div v-for="val in xuan" v-show="a">
                <div class="con" style="">
                    <div class="center-left-body bg">
                        <div class="img-box1">
                            <img :src="val.img1" alt="" class="img-h b-img">
                        </div>
                        <p><a href="detail-1.html" class="center-left-body-a1">{{val.h1}}</a></p>
                        <p><a href="detail-1.html" class="center-left-body-a2">{{val.p1}}</a></p>
                        <p class="mb-p">{{val.math}}</p>
                        <img :src="val.img2" alt="" class="mb-img">
                        <p><a href="" class="tab-mt">{{val.a1}}</a><a href="" class="tab-mt">{{val.a2}}</a></p>
                    </div>
                </div>
            </div>
            <!--第二个 B2C-->
            <div class="con" v-show="b">
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181112_1542008037535.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181112_1541985913463.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>
                </div>


            </div>
            <!--第三个 C2C-->
            <div class="con" v-show="c">
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181107_1541569944473.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181107_1541569944473.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181112_1542010837701.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>
                </div>

            </div>
            <!--第四个 传统零售-->
            <div class="con" v-show="d">
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181113_1542076349985.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181113_1542075324144.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181112_1542027463929.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181107_1541569944473.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>
                </div>

            </div>
            <!--第五个 其他-->
            <div class="con" v-show="e">
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181113_1542091666106.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181113_1542091506167.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181113_1542089470929.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181107_1541569944473.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181112_1542008037535.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p>
                </div>

            </div>
        </div>
    </div>
</div><!--vue 结束-->
</body>

2css代码：

<style>
    .center{width: 1160px;margin: 0 auto;}
    a{text-decoration: none;color: #595959;}
    a:hover{color: #1a79ff;}
    /*tap选项卡*/
    .center-left-tap{height: 58px;}
    .center-left-tap a{font-size: 16px;color: #999;margin-right: 37px;padding-bottom: 19px;}
    .a-hover:hover{color: #595959;}

    /*图文重复内容*/
    .center-left-body{width: 820px;height: 127px;border-top:1px solid #ddd;margin-top: -15px;padding: 21px 0;margin-bottom: 20px;}
    .center-left-body img:nth-child(1){width: 190px;height: 127px;float: left;}
    .center-left-body-a1{float: left;margin-left: 20px;font-size: 18px;line-height: 26px;color: #333;margin-top: -175px;}
    .center-left-body-a2{float: left;margin-left: 210px;font-size: 16px;color: #595959;margin-top: -95px;word-wrap:break-word;}
    .mb-p{float: left;margin-top: -20px;margin-left: 210px;color:#999;}
    .mb-img{float: left;margin-top: -20px;margin-left: 15px;}
    .tab-mt{margin-right: -30px;margin-left: 50px;margin-top: -20px;float: left;}
    .bor-no{border: none;}
    .bg:hover{background-color:#efefef;}
</style>

3js：

<script>
    var vm = new Vue({
        el: ‘#app‘,
        data: {
            xuan: [],
            a: true,
            b: false,
            c: false,
            d: false,
            e: false,
        },
        mounted: function () {
            this.getData()
        },
        methods: {
            getData() {
                $.ajax({
                    type: ‘get‘,
                    url: ‘frame-1.json‘,
                    detaType: ‘JSON‘,
                    success: function (data) {
                        vm.xuan = data.xuan
                    }
                })
            },

            //    选项卡
            mt1: function () {
                this.a = true
                this.b = false
                this.c = false
                this.d = false
                this.e = false
            },
            mt2: function () {
                this.a = false
                this.b = true
                this.c = false
                this.d = false
                this.e = false
            },
            mt3: function () {
                this.a = false
                this.b = false
                this.c = true
                this.d = false
                this.e = false
            },
            mt4: function () {
                this.a = false
                this.b = false
                this.c = false
                this.d = true
                this.e = false
            },
            mt5: function () {
                this.a = false
                this.b = false
                this.c = false
                this.d = false
                this.e = true
            }
        }
    });
</script>

应届菜鸟，大佬勿喷...

 

vue实现选项卡切换效果

标签：原理   com   传统   math   显示   ora   void   天猫   tle   

原文地址：https://www.cnblogs.com/wuhefeng/p/9993174.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！