v-menu正确用法-CSDN博客

本文链接：https://blog.csdn.net/weixin_40945354/article/details/120138900

这是一个使用Vue.js编写的HTML示例，展示了如何创建一个包含下拉菜单的导航栏。当鼠标悬停在菜单项上时，相应的子菜单会显示出来。代码中定义了样式和Vue实例，用于控制菜单的显示和隐藏。该示例适用于前端开发中的交互设计。

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

<!DOCTYPE html>
<html>
	<style>
		body {
			width: 600px;
		}
		a {
			text-decoration: none;
			display: block;
			color: #fff;
			width: 120px;
			height: 40px;
			line-height: 40px;
			border: 1px solid #fff;
			border-width: 1px 1px 0 0;
			background: #255f9e;
		}
		li {
			list-style-type: none;
		}
		#app > li {
			list-style-type: none;
			float: left;
			text-align: center;
			position: relative;
		}
		#app li a:hover {
			color: #fff;
			background: #ffb100;
		}
		#app li ul {
			position: absolute;
			left: -40px;
			top: 40px;
			margin-top: 1px;
			font-size: 12px;
		}
		[v-cloak] {
			display: none;
		}
	</style>
	<body>
		<div id="app" v-cloak>
			<li v-for="menu in menus" @mouseover="menu.show = !menu.show" @mouseout="menu.show = !menu.show">
				<a :href="menu.url">{{ menu.name}}</a>
				<ul v-show="menu.show">
					<li v-for="subMenu in menu.subMenus">
						<a :href="subMenu.url">{{subMenu.name}}</a>
					</li>
				</ul>
			</li>
	

		</div>
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const data = {
						menus: 
						[
							{name: '我的淘宝', url: '#', show: false, subMenus: [
							{name: '已买到的宝贝', url: '#'},
							{name: '已卖出的宝贝', url: '#'}
						]
					},
					{
						name: '收藏夹', url: '#', show: false, subMenus: [
							{name: '收藏的宝贝', url: '#'},
							{name: '收藏的店铺', url: '#'}
						]
					}
					]
					};
					const vm = Vue.createApp({
				data() {
					return data
				}
			}).mount('#app')
		</script>
	</body>
</html>