前端小案例之tab栏切换

最新推荐文章于 2024-06-12 15:17:57 发布

vegetable-WEN

最新推荐文章于 2024-06-12 15:17:57 发布

阅读量875

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45525630/article/details/119273951

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近学习vue的时候用vue实现了一个简单的tab栏切换，分享给大家

文章目录

一、案例介绍？
二、案例代码
总结

一、案例介绍？

效果如下:
在这里插入图片描述

该案例主要是在tab盒子上面放一个ul里面有五个小li，下方对应的是五个盒子，通过控制下面图片盒子的显示隐藏和对比currentIndex和index的值来对应显示相应的盒子。

二、案例代码

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 500px;
            /* height: 1000px; */
            margin: 100px auto;
        }

        .tab ul {
            overflow: hidden;
            background-color: #20232A;
        }

        .tab ul li {
            box-sizing: border-box;
            padding: 0;
            float: left;
            width: 100px;
            height: 45px;
            line-height: 45px;
            list-style: none;
            text-align: center;
            border-top: 1px solid #20232A;
            border-right: 1px solid #20232A;
            color: #61DAFB;
            cursor: pointer;
        }

        .tab ul li:first-child {
            border-left: 1px solid #20232A;
        }

        .tab ul li.active {
            background-color: #757575;
        }

        .tab div {
            width: 500px;
            height: 300px;
            display: none;
            text-align: center;
            font-size: 30px;
            line-height: 300px;
            border: 1px solid #20232A;
            border-top: 0px;
        }

        .tab div img {
            width: 100%;
            height: 100%;
        }

        .tab div.current {
            display: block;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="tab">
            <ul>
                <!-- v-for循环渲染出li的标题 -->
                <!-- class属性判断currentIndex与当前li的index是否匹配，匹配就添加相应类否则将类名置空 -->
                <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id'
                    v-for='(item,index) in list'>{{item.title}}
                </li>
            </ul>
            <div :class='currentIndex===index?"current":""' :key='item.id' v-for='(item,index) in list'>
                <img :src="item.path">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                // 选项卡li当前的索引
                currentIndex: 0,
                list: [{
                    id: 1,
                    title: 'First',
                    path: 'img/1.jpg'
                }, {
                    id: 2,
                    title: 'Second',
                    path: 'img/2.jpg'
                }, {
                    id: 3,
                    title: 'Third',
                    path: 'img/3.jpeg'
                }, {
                    id: 4,
                    title: 'Fourth',
                    path: 'img/4.jfif'
                }, {
                    id: 5,
                    title: 'Fifth',
                    path: 'img/5.png'
                }]
            },
            methods: {
                change: function (index) {
                    // 选项卡切换操作，通过currentIndex操作类名添加到哪个类
                    this.currentIndex = index
                }
            }
        });
    </script>
</body>

</html>

这里由于是用到了vue的知识所以这里需要先自行导入vue.js文件

总结

这就是今天要跟大家分享的用vue实现的小案例

vegetable-WEN

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
前端小案例之tab栏切换

最近学习vue的时候用vue实现了一个简单的tab栏切换，分享给大家文章目录一、案例介绍？二、案例代码总结一、案例介绍？效果如下:该案例主要是在tab盒子上面放一个ul里面有五个小li，下方对应的是五个盒子，通过控制下面图片盒子的显示隐藏和对比currentIndex和index的值来对应显示相应的盒子。二、案例代码代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset=.
复制链接

扫一扫