Vue 折叠实现：v-if/v-show 和过渡效果

在 Vue 中实现折叠可以使用 v-if 或 v-show 指令来控制元素的显示与隐藏。以下是一个简单的示例：\n\nhtml\n<template>\n <div>\n <button @click="toggleCollapse">折叠</button>\n <div v-if="isCollapsed">\n <!-- 折叠内容 -->\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n isCollapsed: false\n };\n },\n methods: {\n toggleCollapse() {\n this.isCollapsed = !this.isCollapsed;\n }\n }\n};\n</script>\n\n\n在上面的示例中，使用v-if指令来判断是否显示折叠内容。点击按钮时，调用toggleCollapse方法来切换isCollapsed的值，从而改变折叠内容的显示与隐藏。\n\n如果你希望使用动画效果来实现折叠，可以结合 Vue 的过渡效果。以下是一个使用 Vue 过渡效果实现折叠的示例：\n\nhtml\n<template>\n <div>\n <button @click="toggleCollapse">折叠</button>\n <transition name="collapse">\n <div v-show="isCollapsed">\n <!-- 折叠内容 -->\n </div>\n </transition>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n isCollapsed: false\n };\n },\n methods: {\n toggleCollapse() {\n this.isCollapsed = !this.isCollapsed;\n }\n }\n};\n</script>\n\n<style>\n.collapse-enter-active,\n.collapse-leave-active {\n transition: height 0.5s;\n}\n.collapse-enter,\n.collapse-leave-to {\n height: 0;\n overflow: hidden;\n}\n</style>\n\n\n在上面的示例中，使用v-show指令来控制折叠内容的显示与隐藏。同时，添加了过渡效果，通过设置.collapse-enter-active和.collapse-leave-active的transition属性来实现动画效果。.collapse-enter和.collapse-leave-to的height属性设置为0，实现折叠和展开的过程。\n\n你可以根据实际需求来调整过渡效果的样式和动画时间。