VUE简易tab栏切换

VUE案例 专栏收录该内容
2 篇文章 0 订阅

    * {
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }
    
    .app {
        margin: 0 auto;
    }
    
    .tab {
        width: 200px;
        height: 30px;
        overflow: hidden;
    }
    
    li {
        float: left;
        width: 50px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #000;
    }
    
    .bgc {
        background-color: pink;
    }
    
    img {
        display: none;
    }
    
    .pic {
        display: block;
    }
    
    [v-cloak] {
        display: none;
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>
    <div class="app" v-cloak>
        <div class="tab">
            <ul>
                <li :class="indexClass==index?'bgc':''" @click="change(index) " v-for="(item, index) in tab " :key="item.id ">{{item.title}}</li>
            </ul>
        </div>
        <div v-for="(item, index) in tab " :key="item.id ">
            <img :src="item.path " :class="indexClass==index?'pic':''">
        </div>
    </div>
    
</body>

</html>

 

<script src="../vue.js "></script>
    <script>
        var vm = new Vue({
            el: '.app',
            data: {
                indexClass: 0,
                tab: [{
                    id: 1,
                    title: '1',
                    path: '../京东案例/images/banner.jpg'
                }, {
                    id: 2,
                    title: '2',
                    path: '../京东案例/images/ad-r.jpg'
                }, {
                    id: 3,
                    title: '3',
                    path: '../京东案例/images/header.jpg'
                }]
            },
            methods: {
                change: function(index) {
                    this.indexClass = index;
                }
            }
        })
    </script>

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值