利用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. Mariadb/MySQL数据库单表查询基本操作及DML语句

    Mariadb/MySQL数据库单表查询基本操作及DML语句 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一数据库及表相关概述 1>.数据库操作 创建数据库: CREATE ...

  2. spring cloud (七) Config server基于svn配置

    1 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  3. KMP算法的时间复杂度与next数组分析

    一.什么是 KMP 算法 KMP 算法是一种改进的字符串匹配算法,用于判断一个字符串是否是另一个字符串的子串 二.KMP 算法的时间复杂度 O(m+n) 三.Next 数组 - KMP 算法的核心 K ...

  4. 2019牛客暑期多校训练营（第三场）G: Removing Stones（启发式分治）

    题意:给定N,表示N堆石子,每堆石子数为a[],问多少个区间,可以满足“石子总和若为偶数,那么可以两两取来自不同堆的石子,直到取完: 如果为奇数,那么排除其中一个,然后可以两两取来自不同堆的石子,直到 ...

  5. linux 判空处理

    linux在进行判空是一个经常要用到的操作,可以使用如下方式: 变量通过" "引号引起来 if [ ! -n "$filename" ];then echo & ...

  6. 关于原生js的节点兼容性

    关于节点的兼容性: 1:获取元素的子节点 a: childNodes:获取元素的子节点,空文本,非空文本,注释,获取的比较全面, 如果只是想获取元素的子节点,请用(children) b:     c ...

  7. 决策树——ID3

    参考网址:https://www.cnblogs.com/further-further-further/p/9429257.html ID3算法 最优决策树生成 -- coding: utf-8 - ...

  8. learning svn diff --summarize

    # svn diff --summarizeA armbian-custom-dc/test/4g-power.shA armbian-custom-dc/test/4g-reset.shM armb ...

  9. ROM

    ROM 是 read only memory的简称,表示只读存储器,是一种半导体存储器.只读存储器(ROM)是一种在正常工作时其存储的数据固定不变,其中的数据只能读出,不能写入,即使断电也能够保留数据 ...

  10. Angular2发送HTTP请求SpringBoot后台跨域问题解决

    Angular通过http发送post请求至SpringBoot的Controller,由于同源策略的保护,遇到跨域问题: • 源(origin)就是协议(http).域名(localhost)和端口 ...