VUE实现选项卡

最新推荐文章于 2024-05-15 13:06:41 发布

二琳爱吃肉

最新推荐文章于 2024-05-15 13:06:41 发布

阅读量319

点赞数

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

本文链接：https://blog.csdn.net/weixin_45906196/article/details/118250249

版权

VUE 专栏收录该内容

7 篇文章 4 订阅

订阅专栏

效果图

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <script src="./js/vue.js"></script>
    <style type="text/css">
        .tab ul {
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        .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 blue;
            border-right: 1px solid blue;
            cursor: pointer;
        }

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

        .tab ul li.active {
            background-color: orange;
        }
        /* 图片调节大小 */
        .tab div.current img{
            width: 500px;
            height: 300px;
        }
        .tab div {
            width: 500px;
            height: 300px;
            display: none;
            text-align: center;
            font-size: 30px;
            line-height: 300px;
            border: 1px solid blue;
            border-top: 0px;
        }
        .tab div.current {
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
        <div class="tab"> <!-- tab栏 -->
            <ul>
                <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>
    var vue = new Vue({
        el: "#app",
        data: {
            currentIndex:0,   //选项卡当前索引
            list:[{
                    id:1,
                    title:"apple",
                    path:"images/apple.png"
                },
                {
                    id:2,
                    title:"orange",
                    path:"images/orange.png"
                },
                {
                    id:3,
                    title:"lemon",
                    path:"images/lemon.png"
                }]
        },
        methods:{
            change:function (index) {
                // 在这里实现选项卡切换操作：本质就是操作类名
                // 如何操作类名？就是通过currentIndex
                this.currentIndex=index;
            }
        }
    });
</script>
</body>
</html>

选项卡图片

苹果图片
橙子图片

orange

柠檬图片

lemon

实现功能

实现一个简易的选项卡功能

二琳爱吃肉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE实现选项卡

效果图代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title> <script src="./js/vue.js"></script> <style type="text/css"> .tab ul { over
复制链接

扫一扫