在Vue中，你可以使用内置指令如v-if或v-show来创建类似于collapse的左侧菜单栏。以下是一个简单的例子：
<template>
<div>
<div :class="{'sidebar-collapsed': isCollapsed}" class="sidebar">
<!-- 菜单内容 -->
<div class="menu-items">
<button @click="toggleMenu">Toggle Menu</button>
<!-- 菜单项 -->
<div v-show="!isCollapsed">
<p>Menu Item 1</p>
<p>Menu Item 2</p>
<p>Menu Item 3</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isCollapsed: false
};
},
methods: {
toggleMenu() {
this.isCollapsed = !this.isCollapsed;
}
}
};
</script>
<style>
.sidebar {
width: 200px; /* 左侧菜单宽度 */
height: 100vh; /* 左侧菜单高度 */
background-color: #3498db; /* 左侧菜单背景色 */
transition: width 0.3s; /* 过渡动画 */
}
.sidebar-collapsed {
width: 50px; /* 菜单折叠后的宽度 */
}
.menu-items {
padding: 20px;
}
</style>在这个例子中，我们定义了一个名为isCollapsed的数据属性来控制菜单的折叠状态。通过点击按钮，触发toggleMenu方法来切换isCollapsed的值，从而实现菜单栏的折叠和展开。CSS部分定义了折叠和展开两种状态下的样式。
你可以根据自己的需求调整样式和内容。