小程序的制造流程_Vue完成侧边菜单栏手风琴效果

摘要: Vue完成侧面莱单栏手风琴实际效果案例编码 文中根据一段简易的编码给大伙儿详细介绍了根据纯vue完成侧面莱单栏手风琴实际效果,编码非常简单,很感兴趣的朋友追随凡科网编...

Vue实现侧边菜单栏手风琴效果实例代码       本文通过一段简单的代码给大家介绍了基于纯vue实现侧边菜单栏手风琴效果,代码很简单,感兴趣的朋友跟随凡科小编一起看看吧

效果图如下所示:

 template 
 div 
 aside 
 li v-for="(item,index) in menuList" 
 div @click="showToggle(item,index)" 
 img v-bind:src="item.imgUrl" / 
 span {{item.name}} /span 
 /div 
 ul v-show="item.isSubShow" 
 li v-for="subItem in item.subItems" 
 div {{subItem.name}} /div 
 /li 
 /ul 
 /li 
 /ul 
 /aside 
 /div 
 /template 

this.menuList.forEach(i = { // 判断如果数据中的menuList[i]的show属性不等于当前数据的isSubShow属性那么menuList[i]等于false if (i.isSubShow !== this.menuList[ind].isSubShow) { i.isSubShow = false; }); item.isSubShow = !item.isSubShow; console.log(item.name) }
color: #ffffff; background: $menuListH2 url("../assets/images/icon-open.png") no-repeat 280px center; border-bottom: 1px solid #669cd9; img{ width: 20px; height: 20px; margin: 15px 16px 15px 20px; vertical-align: top; .oneMenuChild{ padding: 0 20px 0 60px; height: 40px; line-height: 40px; background: $menuBackColor; border-bottom: 1px solid #ffffff; color: #454343; font-size: 18px; /style

总结

以上所述是小编给大家介绍的Vue实现侧边菜单栏手风琴效果实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:自助建站