最近开发过程中发现一个关于v-show的展示问题，直接上代码
父组件
<template>
<div id="app">
<h3>这里是App</h3>
<Child v-show="showchild"/>
</div>
</template>
import Child from './components/Child.vue';
import { ref } from 'vue';
export default {
components:{Child},
setup() {
let showchild = ref(false)
return { showchild }
},
}
子组件
<template>
<div class="child1">这里是child</div>
<div class="child2">这里是child</div>
</template>
<style>
.child1 {
background-color: skyblue;
padding: 10px;
}
.child2 {
background-color: pink;
padding: 10px;
}
</style>
期望结果是页面中子组件隐藏，然而结果是子组件依旧展示
查看元素，也没有display：none
最后发现，将子组件的多个根组件设置为一个根组件时，问题解决
<template>
<div>
<div class="child1">这里是child</div>
<div class="child2">这里是child</div>
</div>
</template>
