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