用vue加element写一个可以收缩的导航菜单

下面是如何使用 Vue 和 Element UI 来创建一个可以收缩的导航菜单的示例代码：

HTML:

<template>
  <el-menu :default-active="activeIndex" mode="horizontal" :collapse="isCollapse" @select="handleSelect">
    <el-menu-item index="1">导航一</el-menu-item>
    <el-menu-item index="2">导航二</el-menu-item>
    <el-menu-item index="3">导航三</el-menu-item>
  </el-menu>
  <el-button @click="collapse">收缩/展开</el-button>
</template>

JavaScript:

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      isCollapse: false
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    },
    collapse() {
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>

在这个示例中，我们使用了 Element UI 的 el-menu 组件来创建一个导航菜单，并且使用了一个按钮来控制菜单的收缩/展开。