vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码
生活随笔
收集整理的這篇文章主要介紹了
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 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux 下邮件服务器,Linux 下
- 下一篇： vue 对象继承_Vue2.0中组件的继