vue实现tab切换效果

最新推荐文章于 2024-04-22 15:48:37 发布

33455432

最新推荐文章于 2024-04-22 15:48:37 发布

阅读量246

点赞数

本文链接：https://blog.csdn.net/weixin_38999134/article/details/109525887

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tabs</title>
    <style>
       .active{
        background: #eee;
       }
       .tabs{
        width: 200px;
        height: 20px;
        font:0;
        padding:0;
       }
       .li-tab{
        width: 50%;
        height: 100%;
        display:inline-block;
        text-align: center;
       }
       .divTab{
        width: 200px;height: 300px;
       }
    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul class="tabs">
        <li class="li-tab" v-for="(item,index) in tabsParam"
        @click="toggleTabs(index)"
        :class="{active:index == nowIndex}"
        >{{item}}</li>
    </ul>
    <div class="divTab" v-show="nowIndex===0">我是tab1</div>
    <div class="divTab" v-show="nowIndex===1">我是tab2</div>
</div>
</body>
</html>
<script>
   var app=new Vue({
    el:'#app',
    data:{
        tabsParam:['tab1','tab2'],//（这个也可以用对象key，value来实现）
        nowIndex:0,//默认第一个tab为激活状态
    },
    methods:{
        toggleTabs:function(index){
            this.nowIndex=index;
        },
    }
   })
</script>

原文https://www.cnblogs.com/junwu/p/10559734.html

33455432

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实现tab切换效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tabs</title> <style> .active{ background: #eee; } .tabs{ width: 200px; height: 20px;
复制链接

扫一扫