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: 3

h5css3_linhuai

18840人浏览 · 2017-05-23 11:14:17

h5css3_linhuai · 2017-05-23 11:14:17 发布

完整代码：

<!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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^