效果圖如下所示：
成都創(chuàng)新互聯(lián)公司科技有限公司專(zhuān)業(yè)互聯(lián)網(wǎng)基礎(chǔ)服務(wù)商，為您提供西部信息服務(wù)器托管，高防服務(wù)器，成都IDC機(jī)房托管，成都主機(jī)托管等互聯(lián)網(wǎng)服務(wù)。
重慶分公司
重慶分公司
export default {
data(){
return{
menuList:[
{
name:'字符錄入',
imgUrl:require('../assets/images/icon-character.png'),
isSubShow:false,
subItems:[
{
name:'字符錄入'
},
{
name:'白話文錄入'
},
{
name:'文言文錄入'
},
{
name:'小寫(xiě)數(shù)字錄入'
}
]
},
{
name:'票據(jù)數(shù)據(jù)錄入',
imgUrl:require('../assets/images/icon-bill.png'),
isSubShow:false,
subItems:[
{
name:'票據(jù)錄入'
},
{
name:'翻打傳票'
},
]
},
{
name:'交易碼錄入',
imgUrl:require('../assets/images/icon-transaction.png'),
isSubShow:false,
subItems:[
{
name:'交易碼錄入'
},
{
name:'交易名稱(chēng)錄入'
},
]
},
{
name:'操作碼錄入',
imgUrl:require('../assets/images/icon-operation.png'),
isSubShow:false,
subItems:[
{
name:'操作碼錄入'
},
{
name:'操作名稱(chēng)錄入'
},
]
},
{
name:'票據(jù)學(xué)習(xí)',
imgUrl:require('../assets/images/icon-billearn.png'),
isSubShow:false,
subItems:[
]
},
{
name:'內(nèi)部憑證學(xué)習(xí)',
imgUrl:require('../assets/images/icon-voucher.png'),
isSubShow:false,
subItems:[
]
},
{
name:'現(xiàn)金管理學(xué)習(xí)',
imgUrl:require('../assets/images/icon-cash.png'),
isSubShow:false,
subItems:[
]
},
]
}
},
methods:{
// 點(diǎn)擊展開(kāi)折疊菜單事件
showToggle:function(item,ind){
this.menuList.forEach(i => {
// 判斷如果數(shù)據(jù)中的menuList[i]的show屬性不等于當(dāng)前數(shù)據(jù)的isSubShow屬性那么menuList[i]等于false
if (i.isSubShow !== this.menuList[ind].isSubShow) {
i.isSubShow = false;
}
});
item.isSubShow = !item.isSubShow;
console.log(item.name)
},
}
} 總結(jié)
以上所述是小編給大家介紹的Vue實(shí)現(xiàn)側(cè)邊菜單欄手風(fēng)琴效果實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
