Vue.js实现div折叠显示：v-if和v-show指令详解

在Vue.js中，可以通过使用'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中。