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)


相关推荐

  • struts2注解配置action_java struts框架

    struts2注解配置action_java struts框架 ActionContext是Action的上下文,Struts2自动在其中保存了一些在Action执行过程中所需的对象,比如session,parameters,locale等。Struts2会根据每个执行HTTP请求的线程来创建对应的ActionContext,即一个线程有一个唯一的ActionContext。因此,使用者可以使用静态方法ActionContext.getContext(…

  • Mybatis拦截器

    Mybatis拦截器一Mybatis拦截器介绍    Mybatis拦截器设计的初衷就是为了供用户在某些时候可以实现自己的逻辑而不必去动Mybatis固有的逻辑。通过Mybatis拦截器我们可以拦截某些方法的调用,我们可以选择在这些被拦截的方法执行前后加上某些逻辑,也可以在执行这些被拦截的方法时执行自己的逻辑而不再执行被拦截的方法。所以Mybatis拦截器的使用范围是…

  • android换苹果,苹果换手机怎么转移数据?苹果、安卓都可以一键转移数据[通俗易懂]

    android换苹果,苹果换手机怎么转移数据?苹果、安卓都可以一键转移数据[通俗易懂]原标题:苹果换手机怎么转移数据?苹果、安卓都可以一键转移数据要更换手机的话,旧手机上的数据怎么办还真的是一个难题啊,毕竟手机用久了,上面的有各种重要的数据不是。那苹果手机换机的话,将数据进行转移,可以分成两种情况,一种吧,就是苹果转苹果,一种就是苹果转安卓了。一、苹果手机数据转移到新iPhone1、借助iCloud云备份手机自带的云备份功能,肯定是可以用上的。①手机连接上WiFi,然后在手机“设置…

  • linux 添加环境变量 $PATH_linuxfor循环执行命令

    linux 添加环境变量 $PATH_linuxfor循环执行命令1.打开编辑文件2.添加环境变量,保存3.source文件

    2022年10月26日
  • 如何彻底卸载MySQL

    如何彻底卸载MySQL

  • Java安装教程

    Java安装教程今日份闲来无事,整理了一些Java的数据库安装教程,请君共阅:其实主要就分三部分:1:下载Java的安装包并安装Java2:电脑环境设置3:验证Java是否安装成功第一步:下载Java的安装包并安装Java:1.首先去官网现在JAVA安装包JAVA安装包下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index.html(官网地址),打开链接后,如下图:2.点击下面椭圆圈起来的“Download”按钮。3:跳转到

发表回复

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

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