在vue项目中,通常会遇到需要使用v-if和v-else标签来处理一些页面渲染的问题,有时候会出现渲染无效果的问题,如下:


代码使用如上图,渲染结果如下图



可以看到,这样写的时候,v-if和v-else标签内容都被渲染出来了,很明显这不符合我们的业务逻辑。

解决办法如下:

渲染效果

可以发现,我们把p标签和h3标签的位置换一下,就可以了。

原因分析:

p标签是行内元素,h3标签是块级元素

在进行嵌套的时候,块级元素可以嵌套块级元素,也可以嵌套行内元素

而行内元素则只能嵌套行内元素,不能嵌套块级元素

这是最开始学习web编程时学习过的知识,然而时间过得越长,也就越模糊了最基础的概念问题

学海无涯苦作舟!!!

Logo

前往低代码交流专区

更多推荐