vue实现简单的二级导航目录

最新推荐文章于 2024-04-06 22:38:10 发布

LLL_LH

最新推荐文章于 2024-04-06 22:38:10 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/LLL_liuhui/article/details/97639353

Vue 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了一个使用Vue.js创建的折叠菜单示例，通过点击目录项可以展示或隐藏子目录，实现了良好的交互效果。该示例展示了如何利用Vue.js的数据绑定和组件特性来构建动态的、响应式的用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
		<style>
			a{text-decoration: none;color: #333;}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in list">
					<a href="javascript:void(0)" @click="showTitle(item)"><b v-show="item.flag == true">-</b><b v-show="item.flag==false">+</b>{{item.name}}</a>
					<ul v-show="item.flag">
						<li v-for="itm in item.child">{{itm.name}}</li>
					</ul>
				</li>
			</ul>
		</div>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					lists: ['前端','后端','ui设计'],
					list: [
						{name: 'web前端', flag: true,child: [{name: 'html'},{name: 'css'},{name: 'js'}]},
						{name: '后端',flag: false,child: [{name: 'C++'},{name: 'C#'},{name: 'java'}]},
						{name: 'ui设计',flag: false,child: [{name: 'PS'},{name: 'AE'},{name: 'AI'}]},
					]
				},
				methods: {
					showTitle(item){
						//点击一个目录其他目录隐藏
						for(var i=0;i<this.list.length;i++){
							this.list[i].flag = false;
						}
						item.flag = true;
						
						//点击一次显示子目录,再次点击隐藏子目录
						//item.flag = !item.flag;
						
					}
				}
			})
		</script>
	</body>
</html>