vue——二级菜单demo

学习了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;}}}})
}

vue——二级菜单demo相关推荐

vue 二级菜单制作
第一种方法,用命名路由传值代码如下: 在绑定时<router-link :to="{name:'home1'}">小说首页</router-link> & ...
html二级菜单显示与隐藏,Vue实现二级菜单的显示与隐藏
Vue实现二级菜单的显示与隐藏 *{ padding: 0; margin: 0; font-size: 14px; } ul{ width: 200px; height: auto; } h2{ b ...
CSS3蓝色宽屏二级下拉菜单DEMO演示
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码?
郎朗坤废话不多说了,直接给大家贴代码了,完整代码: vue点击切换显示隐藏 {{item.name}} {{subItem.name}} 以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐 ...
码农之重学安卓：利用androidx.preference 快速创建一、二级设置菜单(demo)
文章目录卷首语谷歌API参考 1. 基本步骤 2. 创建一个AS项目,NoActivity 3. AS创建一级菜单的SettingsFragment 4. AS创建二级菜单的SettingsFra ...
vue 右键菜单插件简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
CSS之实现二级菜单动态出现
一直觉得二级菜单的出现效果仅仅有js才干控制.今天研究了一下阿里巴巴站点的首页,才发现,原来二级菜单的动态显示也能够使用CSS来控制,原来对CSS是静态的东西一直是误解它了,CSS也能够实现动态的效果 ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
Unity Toggle组制作菜单及菜单栏移动和二级菜单实现！
Unity - Toggle组制作菜单及菜单栏移动和二级菜单实现! 一:效果一二:效果二三:效果三四:此Demo下载 ------> 本文提供详细教程记录遇到的难点并帮助同行的朋友们坚 ...

vue——二级菜单demo

vue——二级菜单demo相关推荐

最新文章

热门文章