vue如何根据条件动态展示组件

Vue中可以使用`<component>`标签及`v-if`指令来根据条件动态展示组件。

具体的实现方法如下：

1. 在父组件中定义需要动态展示的子组件：

<template>
  <div>
    <button @click="showComponentA">显示组件A</button>
    <button @click="showComponentB">显示组件B</button>
    <component v-if="showA" :is="ComponentA"></component>
    <component v-else-if="showB" :is="ComponentB"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      showA: false,
      showB: false
    }
  },
  methods: {
    showComponentA() {
      this.showA = true
      this.showB = false
    },
    showComponentB() {
      this.showA = false
      this.showB = true
    }
  }
}
</script>

2. 在子组件中编写需要展示的内容。

其中`<component>`标签中的`:is="ComponentA"`和`:is="ComponentB"`表示动态绑定当前需要展示的子组件，`v-if`和`v-else-if`指令用于根据条件动态展示不同的子组件。

通过这种方式，就可以根据条件动态展示组件了。