Vue分类下级菜单

最新推荐文章于 2022-10-31 16:06:18 发布

hy3528

最新推荐文章于 2022-10-31 16:06:18 发布

阅读量423

点赞数

分类专栏： Vue html

本文链接：https://blog.csdn.net/hy3528/article/details/103293264

版权

html 同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

Vue

38 篇文章 0 订阅

订阅专栏

在这里插入图片描述
所有内容一定要在最大的div（id=Vue）里
两个div(class=“zong”)里代表两个循环的假数据。第一个div的方法名和第二个div的方法名必须不一样。
（item,index）获取的是假数据的下标。

<!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">
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
    <title>变色选择器</title>
    <style>
        .zong {
            display: flex;
            flex-direction: row;
            flex-flow: row wrap;
        }

        .button_diva {
            border-radius: 5px;
            background-color: blue;
            padding: 0.5rem;
            width: auto;
            margin: 0.5rem;
            color: #fff;
        }

        .avtiv {
            background-color: #000;
        }

        .avtivtwo {
            background-color: red;
        }
        .shuju {
        display: flex;
        flex-direction: column;
    }
    </style>
</head>

<body>
    <div id="Vue">
        <div class="zong">
            <!-- class="item.index == status ? 'avtiv':''" 中item.index获取的是sites中的index        此处用的是三元法 ？代表否则-->
            <div class="button_diva" :class="item.index == status ? 'avtiv':''" v-for="(item,index) in sites"
                :key="index" @click="bintap(item,index)">
                <p>{{item.name}}</p>
            </div>
        </div>

        <div class="zong">

            <div class="button_diva" :class="index == statuss ? 'avtivtwo':''" v-for="(item,index) in sitestwo"
                :key="index" @click="bintaptwo(index)">
                <p>{{item.name}}</p>
            </div>
        </div>

        <div class="shuju">
                <div>
                    {{name}}
                </div>
            </div>
    </div>

   
</body>
<script>
    new Vue({
        el: "#Vue",
        data: {
            status: 0,
            statuss: 1,
            sites: [
                {
                    name: 'Runoob',
                    index: 0
                },
                {
                    name: 'Google',
                    index: 1
                },
                {
                    name: 'Taobao',
                    index: 2
                },
                {
                    name: 'zhoayun',
                    index: 3
                }
            ],
            sitestwo: [
                {
                    name: '西瓜',
                    index: 0
                },
                {
                    name: '大师',
                    index: 1
                },
                {
                    name: '探讨',
                    index: 2
                },
                {
                    name: '嗷嗷嗷',
                    index: 3
                }
            ],
            name: 123,
        },
        methods: {
            bintap(item, index) {
                console.log(item.index)
                this.status = item.index
                if (item.index == 0) {
                    this.sitestwo = [
                        {
                            name: '西瓜',
                            index: 0
                        },
                        {
                            name: '大师',
                            index: 1
                        },
                        {
                            name: '探讨',
                            index: 2
                        },
                        {
                            name: '嗷嗷嗷',
                            index: 3
                        }
                    ]
                } else if (item.index == 1) {
                    this.sitestwo = [
                        {
                            name: '西a瓜',
                            index: 0
                        },
                        {
                            name: '大a师',
                            index: 1
                        },
                        {
                            name: '探a讨',
                            index: 2
                        },
                    ]
                } else if (item.index == 2) {
                    this.sitestwo = [
                        {
                            name: '西a瓜b',
                            index: 0
                        },
                        {
                            name: '大a师b',
                            index: 1
                        },
                        {
                            name: '探a讨b',
                            index: 2
                        },
                    ]
                } else if (item.index == 3) {
                    this.sitestwo = [
                        {
                            name: 'c西瓜b',
                            index: 0
                        },
                        {
                            name: '大c师b',
                            index: 1
                        },
                        {
                            name: '探c讨b',
                            index: 2
                        },
                    ]
                }
            },
            bintaptwo(index) {
            this.statuss = index
            if (index == 0) {
                this.name = 123
            } else if (index == 1) {
                this.name = 456
            }
            else if (index == 2) {
                this.name = 789
            }
            else if (index == 3) {
                this.name = 'aaa'
            }
        },
        },
        
        created() {

        }
    })
</script>
<script>
    $(document).ready(function () {

    });
</script>

</html>

hy3528

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue分类下级菜单

所有内容一定要在最大的div（id=Vue）里两个div(class=“zong”)里代表两个循环的假数据。第一个div的方法名和第二个div的方法名必须不一样。（item,index）获取的是假数据的下标。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫

专栏目录