Vue实现侧边菜单栏手风琴效果实例代码
效果图如下所示:
成都创新互联公司科技有限公司专业互联网基础服务商,为您提供西部信息服务器托管,高防服务器,成都IDC机房托管,成都主机托管等互联网服务。
export default { data(){ return{ menuList:[ { name:'字符录入', imgUrl:require('../assets/images/icon-character.png'), isSubShow:false, subItems:[ { name:'字符录入' }, { name:'白话文录入' }, { name:'文言文录入' }, { name:'小写数字录入' } ] }, { name:'票据数据录入', imgUrl:require('../assets/images/icon-bill.png'), isSubShow:false, subItems:[ { name:'票据录入' }, { name:'翻打传票' }, ] }, { name:'交易码录入', imgUrl:require('../assets/images/icon-transaction.png'), isSubShow:false, subItems:[ { name:'交易码录入' }, { name:'交易名称录入' }, ] }, { name:'操作码录入', imgUrl:require('../assets/images/icon-operation.png'), isSubShow:false, subItems:[ { name:'操作码录入' }, { name:'操作名称录入' }, ] }, { name:'票据学习', imgUrl:require('../assets/images/icon-billearn.png'), isSubShow:false, subItems:[ ] }, { name:'内部凭证学习', imgUrl:require('../assets/images/icon-voucher.png'), isSubShow:false, subItems:[ ] }, { name:'现金管理学习', imgUrl:require('../assets/images/icon-cash.png'), isSubShow:false, subItems:[ ] }, ] } }, methods:{ // 点击展开折叠菜单事件 showToggle:function(item,ind){ 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) }, } }
总结
以上所述是小编给大家介绍的Vue实现侧边菜单栏手风琴效果实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
当前文章:Vue实现侧边菜单栏手风琴效果实例代码
文章源于:http://myzitong.com/article/gpgiph.html