VUE实现二级菜单分类详情

最新推荐文章于 2024-08-19 09:56:27 发布

HqL丶1024

最新推荐文章于 2024-08-19 09:56:27 发布

阅读量2.8k

点赞数

本文链接：https://blog.csdn.net/hql1024/article/details/103289425

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <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>

</head>
<style>
    #Vue {
        display: flex;
        flex-direction: column;
        /*flex-flow: row wrap;*/
    }

    .sort_line {
        padding: 0.5rem;
        background: #00BFFF;
        color: #fff;
        border: 1px solid #00BFFF;
        font-size: 1rem;
        width: 3rem;
        margin: 0.6rem;
        text-align: center;
    }

    .sort_bechoice {
        background: red;
        color: #fff;
    }
    .sort_bechoicetwo{
        background: blue;
        color: #fff;
    }
    .shuju {
        display: flex;
        flex-direction: column;
    }
</style>
<body>
<div id="Vue">
    <div style="display: flex;flex-direction: row;flex-flow: row wrap;">
        <div v-for="(item,index) in assort_list" :key="index">
            <div :class="index == status  ? 'sort_bechoice' : ''" class="sort_line" @click="getchoice(index)">
                {{item.name}}
            </div>
        </div>
    </div>

    <div style="display: flex;flex-direction: row;flex-flow: row wrap;">
        <div v-for="(item,index) in xiaoma" :key="index">
            <div :class="index == statustwo  ? 'sort_bechoicetwo' : ''" class="sort_line" @click="getchoicetwo(index)">
                {{item.name}}
            </div>
        </div>
    </div>

    <div class="shuju">
        <div>
            {{name}}
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#Vue",
        data: {
            status: 0,
            statustwo:0,
            assort_list: [
                {
                    name: "老师"
                }, {
                    name: "同学"
                }, {
                    name: "小张"
                }, {
                    name: "阿水"
                }
            ],
            xiaoma:[
                {
                    name: "木瓜"
                }, {
                    name: "西瓜"
                }, {
                    name: "南瓜"
                }, {
                    name: "苦瓜"
                }
            ],
            name: "aaa",

        },
        methods: {
            getchoice(index) {
                let that = this
                this.status = index;
                console.log(index)
                if (index == 0) {
                    that.name = that.name
                    that.xiaoma = [
                        {
                            name: "木瓜"
                        }, {
                            name: "西瓜"
                        }, {
                            name: "南瓜"
                        }, {
                            name: "苦瓜"
                        }
                    ]
                } else if (index == 1) {
                    that.name = 453
                    that.xiaoma = [
                        {
                            name: "没目标"
                        },{
                            name: "没西瓜"
                        },{
                            name: "没橘子"
                        }
                    ]
                } else if (index == 2) {
                    that.name = 789
                    that.xiaoma = [
                        {
                            name: "没南瓜"
                        },{
                            name: "没苦瓜"
                        }
                    ]
                } else if (index == 3) {
                    that.name = 6472
                    that.xiaoma = [
                        {
                            name: "没橘子"
                        }
                    ]
                }
            },
            getchoicetwo(index){
                this.statustwo = 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() {
            // $.ajax({
            //     type: "get",	//请求方式
            //     async: false,
            //     url: "",
            //     data: {},		//传值给后台
            //     dataType: "json",
            //     success: function (res) {
            //         console.log(res)
            //
            //     },
            // });
        }
    })
</script>
<script>
    $(document).ready(function () {

    });
</script>
</html>