多平台统一管理软件接口，如何实现多平台统一管理软件接口
497
2023-01-30
Vue实现侧边菜单栏手风琴效果实例代码
Vue实现侧边菜单栏手风琴效果实例代码
效果图如下所示：
<aJPtEG;li v-for="(item,index) in menuList">
{{item.name}}
export default {
data(){
return{
menuList:[
{
name:'字符录入',
imgUrl:require('../assets/images/icon-character.png'),
isSubShow:false,
subItems:[
{
name:'字符录入'
},
{
name:'白话文录入'
},
{
name:'文言文录入'
},
{
name:'小写数字录入http://'
}
]
},
{
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.isSubhttp://Show;
console.log(item.name)
},
}
}
总结
以上所述是给大家介绍的vue实现侧边菜单栏手风琴效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
暂时没有评论，来抢沙发吧~