vue实现tab页

原创已于 2022-10-21 14:09:50 修改 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #笔记

于 2018-11-17 11:53:28 首次发布

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Vue.js实现Tab切换效果，通过绑定和监听事件，动态显示对应的div内容。利用v-for指令遍历数据列表，根据点击的标题索引显示相应的div。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title>tab</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src='js/vue.js'></script>
    <script type="text/javascript" src='js/index.js'></script>
</head>
<!-- 
思想：
其实tab切换分两大块，上面的哪一行是一个ul，里面有四个li，下面的内容是四个div只不过只显示一个，其内容对应上面的li
现在要做的就是点击li时显示对应的div。所以当我们点击li时可以获取其index值，然后显示对应index的div。 -->

<body>
    <div id="my">
        <div class="myTab">
            <ul class="tab-tit">
                <!-- 遍历lists获取title的值以及index，点击时获取该index并将其传给num。 -->
                <li v-for="(v,i) in lists" @click="change(i)" :class="{'active':num==i}">
                    {{v.title}}
                </li>
            </ul>
            <div>
                <!-- 遍历lists获取content的值以及index，显示index==num的div，这个num对应的是title的index -->
                <div v-for="(v,i) in lists" v-show="num==i">
                      {{v.content}}
                </div>
            </div>
        </div>
    </div>

</body>

</html>

window.onload=function(){
    new Vue({
        el:'#my',//挂载元素
        data:{
            num:0,
            lists:[
                {title:'AAA',content:'aaa'},
                {title:'BBB',content:'bbb'},
                {title:'CCC',content:'ccc'},
                {title:'DDD',content:'ddd'}
            ]
        },
        methods:{//change方法，点击时将点击的title的index传给num，通过num来控制显示的cntent内容
            change:function(i){
                 this.num=i;
            }
        }

    });
}