服了，记一下v-show不生效的问题

2023-12-15 12:20:51

背景：父组件有一个tab，切换tab就切换不同的子组件

      <div class="h-full border border-color-basis p-16">
        <ChartStyle v-show="state.checkedTab == '0'" :chartConfig="chartConfig" :drawBatteryTests="drawBatteryTests" />
        <AxisAndScaleLines v-show="state.checkedTab == '1'" />
        <Scale v-show="state.checkedTab == '2'" />
        <Grid v-show="state.checkedTab == '3'" />
      </div>

如上所示：通过v-show控制四个子组件的显示和隐藏，但是我加上去怎么都不生效，F12查看元素发现子组件并没有各自的父元素，而且也没有display:none这个样式（v-show底层是通过display:none控制元素的显示隐藏的）

结果真的是：由于我的子组件没有一个根节点，也就是在template区域直接就写了各个小部分的节点，没有一个大的div（这就可能造成各个小部分的display:flex和v-show的display:none造成冲突，导致v-show失效）?，直接在各个子组件加上根节点就可以了

所以，在快乐敲代码的过程中也需要注意代码的规则，不该省的千万不要省啊！！！！！还有就是注意属性display和v-show是否冲突

文章来源:https://blog.csdn.net/weixin_60886885/article/details/135011568
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。