vue按钮展开和收起

要实现Vue按钮的展开和收起功能，你可以使用Vue的条件渲染来操作按钮的显示和隐藏。以下是一个简单的实现示例：

在Vue模板中，你可以使用v-if或v-show指令来根据条件展示或隐藏按钮。假设你有一个data属性`isExpanded`来控制按钮的展开和收起状态：

<template>
  <div>
    <button @click="toggleExpand">切换展开/收起</button>
    <div v-if="isExpanded">
      <!-- 展开时显示的内容 -->
      <p>这是展开时显示的内容。</p>
    </div>
  </div>
</template>

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

在上面的示例中，点击按钮会调用`toggleExpand`方法，该方法会将`isExpanded`属性的值取反。当`isExpanded`为true时，按钮下方的内容会显示；当`isExpanded`为false时，内容会隐藏。

你可以根据自己的需求来扩展这个示例，例如添加动画效果、改变按钮文本等。希望对你有所帮助！