利用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. Nginx 配置文件nginx.conf中文详解

    ######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_ ...

  2. 关于 Spring AOP (AspectJ) 你该知晓的一切

    版权声明:本文为CSDN博主「zejian_」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/javazej ...

  3. mysql的innodb数据存储结构

    ​ 数据库磁盘读取与系统磁盘读取 1,系统从磁盘中读取数据到内存时是以磁盘块(block)为基本单位,位于同一个磁盘块中的数据会被一次性读取出来. 2,innodb存储引擎中有页(Page)的概念,页 ...

  4. MySQL/MariaDB数据库的MHA实现高可用实战

      MySQL/MariaDB数据库的MHA实现高可用实战 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL高可用常见的解决方案 1>.Multi-Master ...

  5. 使用批处理打包C#开发程序

    最近项目接近尾声,测试比较频繁,每天需要发布多个版本 @echo off set zip=C:\Program Files\7-Zip\7z.exe set timestamp=%date:~6,4% ...

  6. ARTS-week1

    Algorithm 小A 和 小B 在玩猜数字.小B 每次从 1, 2, 3 中随机选择一个,小A 每次也从 1, 2, 3 中选择一个猜.他们一共进行三次这个游戏,请返回 小A 猜对了几次? 输入的 ...

  7. 《基于WEB的独立学院补考重修管理系统研究》论文笔记（二十）

    <基于WEB的独立学院补考重修管理系统研究>论文笔记(1) 一.基本信息 标题:基于WEB的独立学院补考重修管理系统研究 时间:2016 来源:南通大学杏林学院 关键词:WEB:补考重修管 ...

  8. Python应用之-修改通讯录

    #-*- coding:utf-8 -*- import sqlite3 #打开本地数据库用于存储用户信息 conn = sqlite3.connect('mysql_person.db') #在该数 ...

  9. 浏览器-同源政策（same-origin policy）

    浏览器安全的基石是“同源政策”(same-origin policy). 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这个政策. 何为同源? 协议相同 域名相同 端 ...

  10. python写入excel(方式二待完善)

    import xlsxwriter #创建一个工作簿并添加一张工作表,当然工作表是可以命名的# workbook = xlsxwriter.Workbook('Expenses01.xlsx')# w ...