vue v-if和v-else无效果

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

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

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

解决办法如下：

渲染效果

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

原因分析：

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

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

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

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

学海无涯苦作舟！！！