vue 左右折叠面板

Vue中左右折叠面板可以通过使用v-if或者v-show指令结合CSS样式来实现。下面是一个简单的示例：

HTML部分：

<div id="app">
  <button @click="togglePanel('left')">左侧面板</button>
  <button @click="togglePanel('right')">右侧面板</button>

  <div class="panel-container">
    <div class="panel" v-if="showLeftPanel">
      左侧面板内容
    </div>
    <div class="panel" v-if="showRightPanel">
      右侧面板内容
    </div>
  </div>
</div>

CSS部分：

.panel-container {
  display: flex;
}

.panel {
  flex: 1;
  border: 1px solid black;
  padding: 10px;
}

Vue部分：

new Vue({
  el: "#app",
  data: {
    showLeftPanel: false,
    showRightPanel: false
  },
  methods: {
    togglePanel(panel) {
      if (panel === 'left') {
        this.showLeftPanel = !this.showLeftPanel;
      } else if (panel === 'right') {
        this.showRightPanel = !this.showRightPanel;
      }
    }
  }
});

在上面的示例中，我们使用了两个按钮来控制左侧面板和右侧面板的显示与隐藏。通过点击按钮，调用togglePanel方法来切换对应面板的显示状态。通过v-if指令根据showLeftPanel和showRightPanel的值决定是否渲染对应的面板元素。CSS样式设置了面板的基本样式，通过flex布局实现了左右两个面板并排显示。