Vue 实现简易tab切换效果

作者: newly_build | 来源:发表于2019-03-25 22:16 被阅读77次

Vue 实现简易tab切换效果
09Vue.js实现tab切换效果
12.Vue嵌套路由(三层)
Vue 简单实现tab切换效果
原生JS实现Tab切换效果和模态框效果
jQuery之切换
zj10 事件应用，小练习
Vue.js实现tab切换效果
动态组件绑定实现Tabs切换
Axure-实现顶部tab式导航栏

实现思路:

1.点击上方的标题，下方的内容随之发生改变；
2.上方和下方用的是两个块，是兄弟节点，所以需要点击tab标题和下方内容一一对应;
3.基于两个模块若下标相同是一个内容实现的。

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>

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>

引入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>

实现效果：
优化Vue实现

<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>