误用v-if / v-show 导致切换隐藏显示的时候报错:

2019-04-09  本文已影响0人  pengkiw

DOMException: Failed to execute 'insertBefore' on 'Node

问题: 用v-if 控制弹框,一开始为隐藏状态,切换为显示状态后,再次切换为隐藏状态的时候报错

v-if / v-show

相同点:都可以实现局部html(或者说是dom元素)的显示和隐藏

不同点:显示和隐藏的原理不同。对于v-show指令而言,当为false时不显示控制的dom元素,其实就是display = none,只是将控制的dom元素给隐藏了,打开控制台调试工具,仍然能够看到被隐藏的代码。但是,对于 v-if指令而言,当为false时不显示被控制的dom元素是因为被控制的dom元素被从dom中移除了,也就是说,打开调试工具后,你看不到被隐藏的代码。

是因为在html中使用了v-if来控制局部显隐导致的  将v-if 改成 v-show就解决问题啦

在v-if为false时,如果我们后续的js操作了v-if控制的dom元素,将会因为该部分dom元素不存在而抛出上述异常。 

上一篇 下一篇

猜你喜欢

热点阅读