利用Vue实现简易tab切换效果

1.1 在我们平时浏览网站的时候，经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了vue后，开始要写出一些简单的特效。
1.2 实现思路是点击上方的标题，下方的内容随之发生改变，上方和下方用的是两个块，是兄弟节点，所以需要点击tab标题和下方内容一一对应，基予两个模块若下标相同是一个内容实现的。
1.3 tab切换第一步先要把HTML写好，这个第一步很关键，主要分为两块结构
 <div id="app">

        <ul class="tab-tilte">

            <li>标题一</li>

            <li>标题二</li>

            <li>标题三</li>

            <li>标题四</li>

        </ul>

        <div class="tab-content">

            <div>内容一</div>

            <div>内容二</div>

            <div>内容三</div>

            <div>内容四</div>

        </div>

    </div>

1.4 tab切换第二步写上对应的css样式

 <style type="text/css">

        ul li {

            margin: ;

            padding: ;

            list-style: none;

        }

        #app {

            width: 600px;

            height: 400px;

            margin:  auto;

            border: 1px solid #ccc;

        }

        .tab-tilte{

            width: %;

        }

        .tab-tilte li{

            float: left;

            width: %;

            padding: 10px ;

            text-align: center;

            background-color:#f4f4f4;

            cursor: pointer;

        }

     /* 点击对应的标题添加对应的背景颜色 */

        .tab-tilte .active{

            background-color: #09f;

            color: #fff;

        }

        .tab-content div{

            float: left;

            width: %;

            line-height: 100px;

            text-align: center;

        }

    </style>

1.5tab切换第三步引入vue实现

<body>

    <div id="app">

        <ul class="tab-tilte">

            <li @click="cur=0" :class="{active:cur==0}">标题一</li>

            <li @click="cur=1" :class="{active:cur==1}">标题二</li>

            <li @click="cur=2" :class="{active:cur==2}">标题三</li>

            <li @click="cur=3" :class="{active:cur==3}">标题四</li>

        </ul>

        <div class="tab-content">

            <div v-show="cur==0">内容一</div>

            <div v-show="cur==1">内容二</div>

            <div v-show="cur==2">内容三</div>

            <div v-show="cur==3">内容四</div>

        </div>

    </div>

    <script src="./js/vue.js" type="text/javascript"></script>

    <script type="text/javascript">

        var app = new Vue({

            el: "#app",

            data: {

                cur: //默认选中第一个tab

            }

        });

    </script>

</body>

效果图：

 
 
1.6tab切换效果改进与优化

（1） 以上代码看起来似乎很简单容易懂，而且效果也能实现，但不够灵活。我们可以发现如果标题和内容同时增多我们要不停的添加cur的索引值，因此我们有必要改进一下代码的写法。
（2）利用vue提供的v-for指令遍历得到索引和值 如下所示：

<div id="app">

    <!-- 推荐这种写法-->

    <ul class="tab-tit">

        <li v-for="(title,index) in tabTitle" @click="cur=index" :class="{active:cur==index}">{{title}}</li>

    </ul>

    <div class="tab-content">

        <div v-for="(m,index) in tabMain" v-show="cur==index">{{m}}</div>

    </div>

</div>

    <script type="text/javascript">

        window.onload = function(){

           var app = new Vue({

            el:'#app',

            data:{

                tabTitle: ['标题一', '标题二', '标题三', '标题四'],

                tabMain: ['内容一', '内容二', '内容三', '内容四'],

                cur:  //默认选中第一个tab

            }

        })

    }

    </script>

最终效果图如下：

 

Vue.js实现tab切换效果的更多相关文章

  1. vue.cli实现tab切换效果

    <template> <div class="cp-select">                     <div class="lef ...

  2. Js 实现tab切换效果

    今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的

  3. 又一Tab切换效果（js实现）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  5. jquery另外一种类似tab切换效果

    简要:最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个,是这么一种简单的效果 ...

  6. vue2.0使用动态组件实现tab切换效果（vue-cli）

    <template> <div> <div>#动态组件实现tab切换效果#</div><br><br><br> &l ...

  7. tab切换效果 网站中的图片自动切换

    网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...

  8. JS---案例：tab切换效果

    案例:tab切换效果 获取所有的li标签 第一件事:把这个a所在的所以兄弟元素的类样式全部移除 (removeAttributes) 第二件事:当前点击的a父级元素li (点击这个a所在的所在元素li ...

  9. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

随机推荐

  1. 【Code Tools】AB性能测试工具（一）

    一.工具下载 yum -y install httpd-tools 二.AB工具使用 格式: ab [options] [http://]hostname[:port]/path 例如:ab -n - ...

  2. Linux操作系统故障排除之Grub信息被删除

    Linux操作系统故障排除之Grub信息被删除 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. [root@yinzhengjie ~]# hexdump -C /dev/sda - ...

  3. Gerrit代码评审流程

    Gerrit代码评审流程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.代码评审流程(如下图所示) 第一步:贡献者报建一个提交,并通过之前从gerrit下载的commit-ms ...

  4. Linux之RHEL7root密码破解（一）

    很多时候我们都会有这样的经历,各种密码,各种复杂,忘记了怎么办???Windows的有关密码忘记了是可以通过相关的邮箱啊手机号等等是可以 找回的,那么Linux的root密码忘记了,该怎么办呢?那么接 ...

  5. kubernetes存储之GlusterFS

    目录 1.glusterfs概述 1.1.glusterfs简介 1.2.glusterfs特点 1.3.glusterfs卷的模式 2.heketi概述 3.部署heketi+glusterfs 3 ...

  6. MySQL：主键、外键、索引（一）

    干货: 主键是关系表中记录的唯一标识.主键的选取非常重要:主键不要带有业务含义,而应该使用BIGINT自增或者GUID类型.主键也不应该允许NULL.可以使用多个列作为联合主键,但联合主键并不常用. ...

  7. [转载]Fiddler界面详解

    转载地址:http://www.cnblogs.com/chengchengla1990/p/5681775.html Statistics 页签 完整页签如下图: Statistics 页签显示当前 ...

  8. RMQ问题及ST表

    RMQ(Range Minimum/Maximum Query)问题指的是一类对于给定序列,要求支持查询某区间内的最大.最小值的问题.很显然,如果暴力预处理的话复杂度为 \(O(n^2)\),而此类问 ...

  9. Partition HDU - 4602 (不知道为什么被放在了FFT的题单里)

    题目链接:Vjudge 传送门 相当于把nnn个点分隔为若干块,求所有方案中大小为kkk的块数量 我们把大小为kkk的块,即使在同一种分隔方案中的块 单独考虑,它可能出现的位置是在nnn个点的首.尾. ...

  10. Mixed Far-Field and Near-Field Source Localization Based on Subarray Cross-Cumulant

    基于子阵列互累积量(Cross-Cumulant)的远场和近场混合声源定位[1]. 文中采用Uniform linear array (ULA)阵列,将其分为两个互相重叠的子阵列,构建关于子阵列输出信 ...