vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码

废话不多说了，直接给大家贴代码了，

完整代码：

vue点击切换显示隐藏

*{

padding: 0;

margin: 0;

font-size: 14px;

}

ul{

width: 200px;

height: auto;

}

h2{

background: green;

border: 1px solid #fff;

color: #fff;

height: 30px;

line-height: 30px;

text-indent: 24px;

}

h3{

background: #999;

height: 24px;

line-height: 24px;

border: 1px solid #fff;

text-indent: 50px;

}

• {{item.name}}

  • {{subItem.name}}

new Vue({

el:"#example",

data:{

items:[

{

name:'家用电器',

isSubShow:false,

subItems:[

{

name:'笔记本电脑'

},

{

name:'台式电脑'

},

{

name:'电视机'

}

]

},

{

name:'服装',

isSubShow:false,

subItems:[

{

name:'男士服装'

},

{

name:'女士服装'

},

{

name:'青年服装'

}

]

}

]

},

methods:{

showToggle:function(item){

item.isSubShow = !item.isSubShow

}

}

})

以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐藏切换的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！