小程序的制造流程_Vue完成侧边菜单栏手风琴效果
摘要： Vue完成侧面莱单栏手风琴实际效果案例编码 文中根据一段简易的编码给大伙儿详细介绍了根据纯vue完成侧面莱单栏手风琴实际效果，编码非常简单，很感兴趣的朋友追随凡科网编...
Vue实现侧边菜单栏手风琴效果实例代码
本文通过一段简单的代码给大家介绍了基于纯vue实现侧边菜单栏手风琴效果，代码很简单，感兴趣的朋友跟随凡科小编一起看看吧
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
效果图如下所示：
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实现侧边菜单栏手风琴效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！
