vue 自己编写 左侧展示隐藏菜单栏 如collapse类似

在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部分定义了折叠和展开两种状态下的样式。

你可以根据自己的需求调整样式和内容。