如何在父组件中使用v-if或v-show来控制子组件的显示，请写出代码

父组件中使用v-if来控制子组件的显示：

<template>
  <div>
    <button @click="showChild = !showChild">Toggle Child Component</button>
    <child-component v-if="showChild"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      showChild: false
    }
  }
}
</script>

父组件中使用v-show来控制子组件的显示：

<template>
  <div>
    <button @click="showChild = !showChild">Toggle Child Component</button>
    <child-component v-show="showChild"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      showChild: false
    }
  }
}
</script>