利用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. 基于GDI显示png图像

    intro 先前基于GDI已经能够显示BITMAP图像:windows下控制台程序实现窗口显示 ,其中BMP图像是使用LoadImage()这一Win32 API函数来做的.考虑到LoadImage( ...

  2. JSON的Go解析

    JSON(Javascript Object Notation)是一种轻量级的数据交换语言,以文字为基础,具有自我描述性且易于让人阅读.尽管JSON是Javascript的一个子集,但JSON是独立于 ...

  3. 《大象 Thinking in UML》读书笔记：软件开发——从现实世界到对象世界

    参考:Process-oriented vs. Object-oriented 前言 软件行业在采用OO的思想后,从一开始只对编码使用OO,到现在“分析-设计-编码”全部环节使用OO,形成了OOA.O ...

  4. beta版本——第二次冲刺

    第二次冲刺 (1)SCRUM部分☁️ 成员描述: 姓名 唐财伟 完成了哪个任务 搭建Nginx 花了多少时间 3h 还剩余多少时间 0h 遇到什么困难 解决端口冲突,启动报错等问题 这两天解决的进度 ...

  5. 动态管理upsteam---nginx_http_dyups_module

    nginx_http_dyups_module  nginx_http_dyups_module是第三方开源软件,它提供API动态修改upstream的配置,并且支持Nginx的ip_hash.kee ...

  6. 米勒罗宾素数检测（Miller-Rabin）

    适用范围:较大数的较快素性判断 思路: 因为有好的文章讲解具体原理(见参考文章),这里只是把代码的大致思路点一下,读完了文章如果还有些迷糊,可以参考以下解释 原理是费马小定理:如果p是素数,则a^(p ...

  7. 用Python添加写入数据到已经存在的Excel的xlsx文件

    # coding:utf-8 from openpyxl import load_workbook import openpyxl # 写入已存在的xlsx文件第一种方法 # class Write_ ...

  8. 利用Python绘制一个正方形螺旋线

    1 安装turtle Python2安装命令: pip install turtule Python3安装命令: pip3 install turtle 因为turtle库主要是在Python2中使用 ...

  9. [Security] Always use parameterized queries

    SQL databases are commonly used to store data; for example - your application could store user profi ...

  10. Deep Learning 简介

    机器学习算法概述参见:https://zhuanlan.zhihu.com/p/25327755 深度学习可以简单理解为NN的发展,二三十年前,NN曾经是ML领域非常火热的一个方向,后来慢慢淡出,原因 ...