如何在父组件中使用v-if或v-show来控制子组件的显示,请写出代码
时间: 2024-04-29 16:21:08 浏览: 57
父组件中使用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>
```
阅读全文