Vue.js 动态侧边栏导航

<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class='af-head'>
			<span class='af-head-msg' style='font-size: 60rpx;'>
				&lt; </span>
				<span class='af-head-msg af-head-fuc'>全部功能</span>
		</view>

		<!-- 左侧导航栏 -->
		<view class='sidebar'>
			<view v-for='item in menuItems' :key='item.id' @click='selectMenuItem(item.id)'
				:class='{ active: activeMenuItem === item.id }'>
				{{ item.name }}
			</view>
		</view>


		<!-- 显示内容 -->
		<view class='ssc'>

		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			activeMenuItem: 1, // 当前选中的菜单项ID
			menuItems: [{
					id: 1,
					name: '菜单项1',
					features: [{
							id: 1,
							name: '功能1',
							icon: '/static/home/128/duanxin.png'
						},
						{
							id: 2,
							name: '功能2',
							icon: '/static/home/128/duanxin.png'
						}
					]
				},
				{
					id: 2,
					name: '菜单项2',
					features: [{
							id: 3,
							name: '功能3',
							icon: '/static/home/128/duanxin.png'
						},
						{
							id: 4,
							name: '功能4',
							icon: '/static/home/128/duanxin.png'
						}
					]
				},
				{
					id: 3,
					name: '菜单项3',
					features: [{
							id: 5,
							name: '功能5',
							icon: '/static/home/128/duanxin.png'
						},
						{
							id: 6,
							name: '功能6',
							icon: '/static/home/128/duanxin.png'
						}
					]
				}
			]
		}
	},
	methods: {
		selectMenuItem(itemID) {
			this.activeMenuItem = itemID;
		}
	}
}
</script>

<style>
.af-head {
	position: relative;
	background-color: #629ffc;
	height: 100rpx;
	display: flex;
	justify-content: center;
	font-size: 44rpx;
	font-weight: 500;
	font-family: sans-serif;
}

.af-head-msg {
	position: absolute;
	bottom: 16rpx;
	color: white;
	left: 38rpx;
}

.af-head-fuc {
	text-align: center;
	left: 300rpx;
}

.sidebar {
	width: 100px;
	height: 100vh;
	padding-top: 20rpx;
}

.sidebar view {
	padding: 10rpx;
	color: black;
	list-style-type: none;
	display: block;
	margin-top: 10px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.sidebar view.active {
	border-left: 4px solid #629ffc;
	background-color: white;
}

.ssc {
	  margin-left: 20px; /* 调整内容区域左边距 */
	  padding: 20px; /* 添加内边距 */
	  background-color: yellow; /* 设置背景色 */
	}

</style>