vue做tab切换案例

最新推荐文章于 2023-09-08 17:50:22 发布

AF01

最新推荐文章于 2023-09-08 17:50:22 发布

阅读量159

点赞数

分类专栏： vue 文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/songJunFeng1/article/details/122904531

版权

vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tab</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.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 {
            width: 500px;
            height: 300px;
            display: none;
            text-align: center;
            font-size: 30px;
            line-height: 300px;
            border-top: 0px;
        }
        
        .tab div.current {
            display: block;
        }
        img {
            width: 500px;
        }
    </style>

</head>

<body>
    <div id="app">

        <div class="tab">
            <!-- tab栏 -->
            <ul>
                <li 
                 @click="change(index)" 
                 :class="currentIndex == index ? 'active' : ''" :key="item.id" 
                 v-for="(item,index) in list" v-text='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 vm = new Vue({
            el: '#app',
            data: {
                currentIndex: 0,
                list: [{
                    id: 1,
                    title: '美女1',
                    path: 'https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576'
                }, {
                    id: 2,
                    title: '美女2',
                    path: 'https://img2.baidu.com/it/u=2695670799,1031144296&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
                }, {
                    id: 3,
                    title: '美女3',
                    path: 'https://img0.baidu.com/it/u=2518793977,1504791295&fm=253&fmt=auto&app=138&f=JPEG?w=641&h=500'
                }]
            },
            methods: {
                change: function(index) {
                    this.currentIndex = index
                }
            },
        })
    </script>
 
</body>

</html>