I won't say much nonsense, I will just post code to you.
Complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vueClick to toggle to show hide</title>
<script src="/vue/2.2.2/"></script>
<style type="text/css">
*{
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;
}
</style>
</head>
<body>
<div >
<ul>
<li v-for="item in items">
<h2 @click="showToggle(item)">{{}}</h2>
<ul v-show="">
<li v-for="subItem in ">
<h3>{{}}</h3>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#example",
data:{
items:[
{
name:'Home appliances',
isSubShow:false,
subItems:[
{
name:'Laptop'
},
{
name:'desktop computer'
},
{
name:'TV set'
}
]
},
{
name:'clothing',
isSubShow:false,
subItems:[
{
name:'Men's Clothing'
},
{
name:'Ladies' Clothing'
},
{
name:'Youth Clothing'
}
]
}
]
},
methods:{
showToggle:function(item){
= !
}
}
})
</script>
</body>
</html>
The above is the example code for display and hidden switching of the second-level menu on the left. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!