Vue 条件渲染动态切换组件案例解析

src/components/2026530/2/
├── ComponentA.vue           # 组件 A
├── ComponentB.vue           # 组件 B
├── ComponentC.vue           # 组件 C
└── ConditionalRendering.vue  # 主组件（条件渲染）

<ComponentA v-if="condition === 'A'" />
<ComponentB v-else-if="condition === 'B'" />
<ComponentC v-else />

<template>
  <div class="component-a">
    <h2>组件 A</h2>
    <p>这是第一个组件的内容</p>
  </div>
</template>

<style scoped>
.component-a {
  padding: 20px;
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
  border-radius: 8px;
  margin: 10px;
}
</style>

<template>
  <div class="component-b">
    <h2>组件 B</h2>
    <p>这是第二个组件的内容</p>
  </div>
</template>

<style scoped>
.component-b {
  padding: 20px;
  background-color: #fce4ec;
  border: 2px solid #e91e63;
  border-radius: 8px;
  margin: 10px;
}
</style>

<template>
  <div class="component-c">
    <h2>组件 C</h2>
    <p>这是第三个组件的内容</p>
  </div>
</template>

<style scoped>
.component-c {
  padding: 20px;
  background-color: #e8f5e9;
  border: 2px solid #4caf50;
  border-radius: 8px;
  margin: 10px;
}
</style>

<template>
  <div class="container">
    <h1 align="center">条件渲染动态切换组件</h1>
    <div class="button-group">
      <button @click="currentComponent = 'A'" :class="{ active: currentComponent === 'A' }">显示组件 A</button>
      <button @click="currentComponent = 'B'" :class="{ active: currentComponent === 'B' }">显示组件 B</button>
      <button @click="currentComponent = 'C'" :class="{ active: currentComponent === 'C' }">显示组件 C</button>
    </div>
    <div class="component-container">
      <ComponentA v-if="currentComponent === 'A'" />
      <ComponentB v-else-if="currentComponent === 'B'" />
      <ComponentC v-else />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
import ComponentC from './ComponentC.vue'

const currentComponent = ref('A')
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.button-group {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: 2px solid #ddd;
  background-color: white;
  border-radius: 4px;
  transition: all 0.3s;
}

button:hover {
  background-color: #f5f5f5;
}

button.active {
  background-color: #2196f3;
  color: white;
  border-color: #2196f3;
}

.component-container {
  min-height: 200px;
}
</style>

<button :class="{ active: currentComponent === 'A' }">显示组件 A</button>