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

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

      

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

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

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

你可能感兴趣的:(前端,javascript,服务器)