Vue 多个 Div 模块条件渲染淡入淡出效果实现 - 使用 v-if 或 v-show

在 Vue 中，你可以使用 `v-if` 或 `v-show` 指令来根据条件渲染多个 div 模块，并且可以结合 CSS 过渡效果实现淡入淡出的效果。

首先，在 Vue 的模板中，你可以使用 `v-if` 或 `v-show` 指令来根据条件渲染 div 模块。例如，你可以在 data 中定义一个布尔值的变量 `showDiv`，然后使用 `v-if='showDiv'` 或 `v-show='showDiv'` 来决定是否渲染该 div 模块。

接下来，你可以结合 CSS 过渡效果来实现淡入淡出的效果。你可以为 div 模块添加一个过渡类，例如 `fade`，然后在 CSS 中定义该过渡类的效果。可以使用 Vue 的 `transition` 组件来自动添加过渡类。

下面是一个示例代码：

<template>
  <div>
    <button @click='toggleDiv'>切换模块</button>
    <transition name='fade'>
      <div v-if='showDiv' class='fade-in-out'>
        <!-- div 模块的内容 -->
      </div>
    </transition>
  </div>
</template>

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

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-in-out {
  /* div 模块的样式 */
}
</style>

在上面的示例中，当点击按钮时，`toggleDiv` 方法会切换 `showDiv` 的值，从而决定是否渲染 div 模块。在 div 模块上使用了 `transition` 组件，并设置了过渡类名为 `fade`。在 CSS 中，定义了 `fade-enter-active` 和 `fade-leave-active` 类来控制过渡效果的持续时间，以及 `fade-enter` 和 `fade-leave-to` 类来控制淡入和淡出的 opacity 值。

这样，当切换模块时，div 模块会出现淡入淡出的效果。