vue实现选项卡切换效果

效果如下：

说明：

这里我使用的原理是利用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>

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

原文地址：https://www.cnblogs.com/wuhefeng/p/9993174.html

时间： 2024-10-28 14:58:54

vue实现选项卡切换效果的相关文章

vue实现tab选项卡切换效果

tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div class="tab"> <span @click="cur = 0">首页</span> <span @click="cur = 1">广场</span> <span @click=&qu

用html+css+js实现选项卡切换效果

文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居

仿百度首页选项卡切换效果

效果:http://hovertree.com/texiao/jquery/71/ 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title> <base ta

[前端] html+css+javascript 实现选项卡切换效果

用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居 瓷砖就像选好老婆 卫生间烟道的设计 二手房: 通州豪华3居260万 二环稀缺2居

用js实现选项卡切换效果

这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class="selected">房产</li> <li>家居</li> <li>二手房</li></ul><div class="tab_box"> <div> 275万购昌平邻铁三居

js选项卡切换效果

选项卡切换在页面中比较常见,这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tab选项卡</title> 6 <style> 7 *{margin:0;padding:0;font-size

使用ViewPager+Fragment实现选项卡切换效果

参考链接:http://www.jianshu.com/p/7bc9a1ff137e http://www.devstore.cn/code/info/245.html http://www.tuicool.com/articles/FfeiumV 本人参考了三篇文章来写这个页面,但是运行这上面给出的源码,发现每个fragment的flag并不能实现切换. 要实现的效果如下: 在activity_main.xml中设置布局.xml内容如下: <LinearLayout xmlns:android

编程练习--简单实用的选项卡切换效果

有网友私信我,说我前几篇写编程练习的例子让他们感觉我写代码的方式和他们不一样,让他们很受启发,希望我多写一些这样的例子.他们帮我总结了一下,主要表现在以下三个方面: 1. 代码外观整洁清爽. 2.喜欢用对象方式编写. 3.喜欢用原生javascript. 我非常认同上面三点,事实上我也是坚持这么做的.第1点自不必说,爱美之心,人皆有之.我想没有一个人愿意看排的凌乱不甚的代码的.第2点呢,我个人认为好处就很多了,最直接的好处就是可以更好的组织代码,使各功能模块之间即独立又相互协调,也方便扩展和维护

QQ空间HD(6)-实现自定义的选项卡切换效果

DJTabbarButton.m #import "DJTabbarButton.h" @implementation DJTabbarButton - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { [self setBackgroundImage:[UIImage imageNamed:@"tabbar_separate_selected_bg&qu