vue左侧导航栏可以点击按钮收起只剩图标例子

下面是一个简单的Vue左侧导航栏，可以通过点击按钮收起只剩图标的例子。

<template>
  <div class="sidebar">
    <div class="sidebar-header">
      <h3>My App</h3>
      <button @click="toggleSidebar">
        <i class="fa fa-bars"></i>
      </button>
    </div>
    <div class="sidebar-content" :class="{ 'collapsed': isCollapsed }">
      <ul>
        <li>Home</li>
        <li>Profile</li>
        <li>Settings</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    }
  },
  methods: {
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

<style>
.sidebar {
  background-color: #f4f4f4;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #ccc;
}

.sidebar-header h3 {
  margin: 0;
}

.sidebar-header button {
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
}

.sidebar-content {
  padding: 10px;
}

.collapsed .sidebar-content {
  display: none;
}

.sidebar-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-content li {
  padding: 5px 0;
}
</style>

在这个例子中，我们使用了一个`isCollapsed`变量来控制左侧导航栏的收起和展开状态。当点击按钮时，我们会调用`toggleSidebar`方法来切换`isCollapsed`变量的值。同时，我们还使用了Vue的动态绑定语法`:class`来根据`isCollapsed`变量的值动态添加或删除`collapsed`类，从而控制左侧导航栏的样式。