vue.js 左侧二级菜单显示隐藏切换实例

创建时间：2017-05-23 投稿人：浏览次数：5985

完整代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue点击切换显示隐藏</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></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 id="example">
		<ul>
			<li v-for="item in items">
				<h2 @click="showToggle(item)">{{item.name}}</h2>
				<ul v-show="item.isSubShow">
					<li v-for="subItem in item.subItems">
						<h3>{{subItem.name}}</h3>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<script type="text/javascript">
	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
			}
		}
	})
	</script>
</body>
</html>

声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。

热门文章: CTF writeup 2_南邮网络攻防训...; SSM框架——详细整合教程（...; Linux Shell脚本编程－－curl命...; HttpClient使用详解; Java面试题全集（上）; JAVA设计模式之单例模式; java.lang.OutOfMemoryError: PermGen ...; TCP协议中的三次握手和四次...; form表单的两种提交方式，su...; String,StringBuffer与StringBuilder...

最新文章: Java之品优购课程讲义_day20（7）; 剑指 Offer - 8：跳台阶; Netty权威指南_札记02_NIO编程; mysql时间属性之时间戳和datetime之...; 虚拟现实或许可以拯救古埃及的“...; spring cloud服务注册中心eureka---集群...; Java SE 第六章; HTTP请求+数据库; HIDL学习笔记之HIDL C++（第二天）; ubuntu系统下指定tomcat运行时为JDK1.8...

vue.js 左侧二级菜单显示隐藏切换 实例

vue.js 左侧二级菜单显示隐藏切换实例