vue怎么实现div的折叠显示

在Vue中，可以通过使用v-if或v-show指令来实现div的折叠显示。

1. 使用v-if指令：

<template>
  <div>
    <button @click="toggleDiv">Toggle Div</button>
    <div v-if="showDiv">This is a collapsible div.</div>
  </div>
</template>

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

2. 使用v-show指令：

<template>
  <div>
    <button @click="toggleDiv">Toggle Div</button>
    <div v-show="showDiv">This is a collapsible div.</div>
  </div>
</template>

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

以上两种方法的区别在于，使用v-if指令时，如果条件为false，那么该元素将完全从DOM中移除。而使用v-show指令时，如果条件为false，那么该元素只是设置为display: none，仍然存在于DOM中