tab切换vue

最新推荐文章于 2024-07-18 20:18:47 发布

賀崽

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量118

点赞数

文章标签： vue tab html css3 html5

本文链接：https://blog.csdn.net/Z_qing_he/article/details/115402603

版权

tab切换vue

实现联动效果

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        #app {
            overflow: hidden;
            margin-top: 30px;
        }
        
        #app>div {
            float: left;
            padding-left: 43px;
            font-size: 20px;
        }
        
        #app>ul {
            margin-top: 30px;
        }
        
        #app>ul>li {
            width: 45px;
            line-height: 25px;
            height: 160px;
            text-align: center;
            margin-top: 10px;
            float: left;
            margin: 0 2px 0 37px;
        }
        
        #app>ul>li>p {
            padding: 10px 0 0 0;
        }
        
        .active {
            color: violet;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-for="(item,index) in list" :key="index" v-on:click='a(index)' v-bind:class="{active:index==num}">
            {{item.tab}}
        </div>
        <ul>
            <li v-for="(items,index1) in list" :key="index1">
                <p v-for="(lies,index2) in items.lis" :key="index2" v-show="index1==num">
                    <span v-on:click='b(lies,index1)'>{{lies}}
                    </span>
                </p>
            </li>
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                show: true,
                num: 0,
                list: [{
                        tab: '区域',
                        lis: ['南阳', '洛阳', '信阳', '濮阳'],
                    }, {
                        tab: '价格',
                        lis: ['20w', '30w', '100w', '300w'],
                    }, {
                        tab: '房型',
                        lis: ['二室', '三室', '四室', '六室'],
                    }, {
                        tab: '朝向',
                        lis: ['朝东', '朝南', '朝西', '朝北']
                    }

                ]

            },
            methods: {
                a(i) {
                    this.num = i
                },
                b(is, index) {
                    this.list[index].tab = is
                },
            }
        })
    </script>

</body>

</html>

賀崽

关注

0
点赞
踩
0

收藏

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

tab切换vue实现联动效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫