先给大家来一个错误 示范:
<div>
<p v-if="Array.isShow">
<p v-for="item in Array.data"></p>
</p>
......
</div>
看上面的代码,咋一看感觉是没有问题的,但是只要运行一下就会发现这个 if 判断并没有生效.这个是什么原因造成的呢?可以先给大家看一下运行的结果:
看到是不是会有一头雾水的感觉,为什么会这样么?这个时候就不得不说一下块级元素与内联元素的嵌套问题了:
- 块级中可以包括一部分块级元素,并可以包含内联元素。内联元素中不包含块级元素,只可以包含内联元素。
- 块级与块级并列,内联与内联元素相并列。
看到这里是不是有一种恍然大悟的感觉了呢?
P 标签虽然是块级元素,但不可包含其他块级元素。
像 P标签 . <h1 ~6> dt标签 这几个块元素只可包含内联元素,
所以p标签无法嵌套 p div ul 标签