vue——二级菜单demo

vue——二级菜单demo学习了vue,最近想着写一写demo练一练,今天写的二级菜单,中间踩过很多坑1、存数据:最开始想着一级菜单存一个数组,二级菜单存不同的数组。那么问题来了,一级菜单和二级菜单应该是超级相关联的,如果分开存储再去建立关系很麻烦,所以存在一个数组对象中,那么也就是说,不管多少级菜单都可以这样,又方便还不需要我们自己去建立相关关系。2、‘^’的变化,最开始想着不同状态用v-show去操作dom…

大家好,又见面了,我是你们的朋友全栈君。

学习了vue,最近想着写一写demo练一练,今天写的二级菜单,中间踩过很多坑

1、存数据:最开始想着一级菜单存一个数组,二级菜单存不同的数组。那么问题来了,一级菜单和二级菜单应该是超级相关联的,如果分开存储再去建立关系很麻烦,所以存在一个数组对象中,那么也就是说,不管多少级菜单都可以这样,又方便还不需要我们自己去建立相关关系。

2、‘^’  的变化,最开始想着不同状态用v-show去操作dom,这样的话就是让我们多写一个b标签,也不是不可行。不过我又想了一下,用动态改变class也是很方便,也就是用v-bind:class=“”,这样我们的样式不管怎么不同,改起来也很方便。

3、绑定点击事件的a标签,我最开始不小心写了href属性,导致一个啥问题呢,就是我们点击后,页面就会刷新,数据又变成了我们之前的数据,就感觉只是闪一下的出现我们要的东西。所以要把href去除,防止它刷新。不过有其他链接应该不一样。

index.html

<!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>二级导航目录</title>
    <script src="vue.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="tree" id="my">
        <ul>
            <li class="p_item" v-for="list in lists">
                <!-- a标签不能带href,不然会刷新,刷新数据和没调用点击函数一样,此处踩坑了 -->
                <a class="p_title" v-on:click="curshow(list)">{
  
  {list.name}}
                    <b :class="list.flag ? 'down': 'up'">^</b>
                </a>
                <ul class="c_item" v-if="list.flag">
                    <li v-for="sub in list.sublist">
                        <a>{
  
  {sub.name}}</a>
                    </li> 
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

index.css

* {
    margin: 0px;
    padding: 0px;
}
ul,li {
    list-style-type: none;
}
body,html {
    width: 100%;
    height: 100%;
}
a {
    color: #fff;
    text-decoration: none;
}
.tree {
    width: 200px;
    height: 100%;
    background: #316BAA;
}
.p_title {
    color: #fff;
    display: block;
    padding: 15px;
    cursor: pointer;
}
.p_title b{
    float: right;
    transition: all ease 1s;
    -webkit-transition: all ease 1s;
    -o-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -ms-transition: all ease 1s;
}
.up {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
}
.down {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}
.p_title:hover {
    color: #999;
}
.c_item  a{
    display: block;
    padding: 10px 20px;
    background: #275586;
    color: #fff;
}
.c_item li{
    cursor: pointer;
}
.c_item li a:hover {
    color: #999;
}

index.js

window.onload = function () {
    var vm = new Vue({
        el: '#my',
        data: {
            lists: [{
                    name: '运动服务',
                    //用于状态判定
                    flag: false,
                    //二级菜单
                    sublist: [
                        { name: '运动服务1'}, 
                        { name: '运动服务2'}, 
                        { name: '运动服务3'}, 
                    ]
                },
                {
                    name: '衣服包包',
                    flag: false,
                    sublist: [
                        { name: '裙子'}, 
                        { name: '套装'}, 
                        { name: '娃娃鞋'}, 
                        { name: '靴子'}
                    ],
                },
                {
                    name: '母婴用品',
                    flag: false,
                    sublist: [
                        { name: '奶粉'}, 
                        { name: '尿不湿'}, 
                        { name: '婴儿床'}
                    ]
                }
            ]
        },
        methods: {
            curshow: function(list){
                //如果状态是点开的,那么再次点击就隐藏
                if(list.flag){
                    list.flag=false;
                }
                //若当前的是隐藏,则点击当前的显示,其余的隐藏
                else{
                    for(let i=0;i<this.lists.length;i++){
                        this.lists[i].flag=false;
                    }
                    list.flag = true;
                }
                
            }
        }
    })
}

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/137591.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • patch的用法_以的用法

    patch的用法_以的用法转载:http://shenze60.blog.163.com/blog/static/315747722009724113026896/首先介绍一下diff和patch。在这里不会把man在线文档上

  • 规范化理论:多值依赖的理解_依赖关联泛化实现

    规范化理论:多值依赖的理解_依赖关联泛化实现多值依赖的定义我们用一个例子来引出多值依赖(MultivaluedDependency,MVD)的含义。假设学校中一门课程可由多名教师讲授,教学中他们使用相同的一套参考书,这样我们可用下图的非规范化的关系来表示课程C、教师T和参考书B间的关系。关系CTB如果关系CIB转化成规范化的关系,如图所示。规范后的关系CTB由此可以看出,规范后的关系模式…

    2022年10月25日
  • s一般怎么称呼自己的m_英文信的开头和结尾,怎么写才不会出错?

    s一般怎么称呼自己的m_英文信的开头和结尾,怎么写才不会出错?一提起写英文信,很多人觉得很简单,不就是开头叫声dear,结尾说句sincerely吗?但其实,根据不同的情况,前后都会有特殊的要求。我们要怎么写才不会出错呢?首先,说一种我们最熟悉的情况,就是当你明确知道对方姓名的时候,我们应该如何写开头和结尾。正式的写法就是dear后面加上具体称呼,比如马丁先生“Mr.Martin”,这时候应该写他的姓氏(surname)。Mr.即Mister的缩写,意思是…

  • python做物联网(物联网技术应用)

    开篇Python作为一门快速发展的解释性编程语言,数以百万计的开发者已经将Python应用在人工智能、游戏开发、数据挖掘、信息安全、系统运维等行业并取得了成功。现如今,一大批国内外头部IoT解决方商正在尝试将Python引入物联网/智能硬件开发行业,部分支持python语言的物联网开发板和模组也陆续面试。例如阿里云智能推出的HaaS开发板,树莓派推出的RaspberryPiPico开发板等。那么,物联网设备会是Python的下一…

  • 公网IP和内网IP的区别? 什么是127.0.0.1?

    公网IP和内网IP的区别? 什么是127.0.0.1?IP地址是设备在网络上的唯一标识符,比如无线路由器有两个IP,公网IP(例如100.78.118.73)连接互联网,私有(内网)IP(如192.168.1.1)连接局域网,当设备连接WIFI上网,无线路由器就会给手机或者电脑分配一个私有IP。这里提出了两种IP,公网IP和内网IP。怎么理解呢?其实是因为近几十年广泛运用的IPV4地址枯竭,已经无法让每个设备都拥有一个IP了,于是NAT技术诞生,…

  • POSTMAN自动生成接口文档_swagger自动生成接口文档

    POSTMAN自动生成接口文档_swagger自动生成接口文档介绍drf-spectacular是为DjangoRESTFramework生成合理灵活的OpenAPI3.0模式。它可以自动帮我们提取接口中的信息,从而形成接口文档,而且内容十分详细,再也不

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号