利用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. 【Spring Boot】Spring Boot之自定义配置参数绑定到Java Bean

    一.@Value方式 1.我的配置文件:application-dev.yml # 自定义项目配置 startproject: pro1: pro2: pro3: pro4: lists: - ' - ...

  2. Pthon魔术方法（Magic Methods）-描述器

    Pthon魔术方法(Magic Methods)-描述器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.描述器概述 1>.描述器定义 Python中,一个类实现了&quo ...

  3. Ceph添加、删除osd及故障硬盘更换

    添加或删除osd均在ceph部署节点的cent用户下的ceph目录进行. 1. 添加osd 当前ceph集群中有如下osd,现在准备新添加osd: (1)选择一个osd节点,添加好新的硬盘: (2)显 ...

  4. Linux 文件监控之谁动了我的奶酪

    有时候配置文件会被莫名其妙的修改,但是找不到修改他的进程,从而无法抓住罪魁祸首,这时候就诞生了摄像头.呃呃,应该是audit 比如我要监控一个文件test.txt [root@hsun /]# aud ...

  5. python代码规范 自动优化工具Black

    自动优化工具Black 在众多代码格式化工具中,Black算是比较新的一个,它***的特点是可配置项比较少,个人认为这对于新手来说是件好事,因为我们不必过多考虑如何设置Black,让 Black 自己 ...

  6. python笔记35-装饰器

    前言 python装饰器本质上就是一个函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外的功能,装饰器的返回值也是一个函数对象. 很多python初学者学到面向对象类和方法是一道大坎,那么p ...

  7. NodeJS 多版本管理（NVM）

    前言 现在前端各种框架更新较快,对 Node 的依赖也不一样,Node 的过版本管理也很有必要. NVM(Node Version Manager),是一个 Node 的版本管理工具. 官方的 NVM ...

  8. 《The One 团队》：第九次团队作业：BETA冲刺与团队项目验收

    项目 内容 作业所属课程 所属课程 作业要求 作业要求 团队名称 < The One !> 作业学习目标 (1)掌握软件黑盒测试技术:(2)学会编制软件项目总结PPT.项目验收报告:(3) ...

  9. tcp中设置连接超时

    直接上代码: 设置连接超时 //首先改成非阻塞套接字 unsigned ; int rm=ioctl(sConnect,FIONBIO,(unsigned long*)&ul); ) { pr ...

  10. 20199301《Linux内核原理与分析》第十二周作业

    ShellShock攻击实验 一.环境搭建 下载 $ sudo su $ wget http://labfile.oss.aliyuncs.com/bash-4.1.tar.gz 安装 $ tar x ...