0
点赞
收藏
分享

微信扫一扫

div层级标签对于组件显示和隐藏的影响

落花时节又逢君to 2022-03-13 阅读 89

给大家避避坑,我花了几天的时间才发现这个问题(可能是我太蠢了)

要实现的效果:

点击链接,黄色块隐藏,绿色块显示

注意:router-view 在哪,页面就从哪里开始渲染

本案例,router-view是在h2标签后,所以在h2标签后开始渲染

接下来继续回到我们的案例,我们需要实现一个组件隐藏和显示(使用 v-if)

并使用watch监视路由的变化,如果发现路由跳转,则改变v-if的值

下面附上代码:

 

 

可得到的结果却是

 你没看错,得到的是一片空白

 可是,逻辑也没毛病啊?到底是为什么?

你还记得一开始的效果图吗?绿色块是被包含在黄色块中,所以当我们隐藏黄色块时,会将绿色块一起隐藏

 

让我们修改代码:

将原来的黄色块用一对div标签包裹

然后需要渲染出来的绿色标签用一对div标签包裹 

可能有人会说,这不是一眼就能看出来嘛

可是当你div标签里嵌套着div标签,层层嵌套,你就看不出来你写的东西在哪个div标签里了,如果div标签嵌套较多,尽量写好它们的层次结构,并且必要时,可以将它们折叠起来,就能清晰地看出网页的大结构了 

第一次写文章,以后会越写越好的!

举报

相关推荐

0 条评论