专栏首页Kirin博客利用Vue实现简易tab切换效果

利用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: 0;
            padding: 0;
            list-style: none;
        }
        #app {
            width: 600px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        .tab-tilte{
            width: 90%;
        }
        .tab-tilte li{
            float: left;
            width: 25%;
            padding: 10px 0;
            text-align: center;
            background-color:#f4f4f4;
            cursor: pointer;
        }
     /* 点击对应的标题添加对应的背景颜色 */
        .tab-tilte .active{
            background-color: #09f;
            color: #fff;
        }
        .tab-content div{
            float: left;
            width: 25%;
            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:0 //默认选中第一个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: 0 //默认选中第一个tab
            }
        })
    }
    </script>

最终效果图如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue @import 路径问题

    //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)

    kirin
  • vue动态选择select

    本文实例讲述了vue中动态select的使用方法。分享给大家供大家参考,具体如下:

    kirin
  • django学习-day03

    #DTL模板中的python语句使用 ###if->elif->else: <body> {% if k.o.1 < 2 %} \<p>是的\</p> ...

    kirin
  • JQuery学习笔记之选择器

    marsggbo
  • 怎么处理多层Json数据循环遍历的问题?看这里

    今天我们写一个关于处理多层for循环的问题,其实这个严格来说不是多层循环的问题,他的本质其实是对Json数据格式的处理,很多时候啊我们的数据格式是这样的

    何处锦绣不灰堆
  • 2301: [HAOI2011]Problem b

    2301: [HAOI2011]Problem b Time Limit: 50 Sec  Memory Limit: 256 MB Submit: 1737...

    HansBug
  • 选择器与css的一些用法

    天天_哥
  • 用CSS画小猪佩奇

    腾讯NEXT学位
  • H5页面实现原理分析

    <!doctype html> <html> <head> <style> html{overflow:hidden;} body{margin:0;} .w...

    用户1730674
  • 你听过 React Fragments吗??

    React 中常见模式是为一个组件返回多个元素。为了包裹多个元素你肯定写过很多的 div 和 span,进行不必要的嵌套,无形中增加了浏览器的渲染压力。

    前端博客 : alili.tech

扫码关注云+社区

领取腾讯云代金券