v-show

2,466 阅读1分钟

Vue.js 对 v-show 的解释

v-show 是根据条件展示元素的指令,原理就是切换元素的 display 属性。哈?就酱?

似懂非懂,就自己搞了点事情。。。

大胆的事

  • v-show 之前,先来看看 v-if

图中可以看到,v-if 表达式为 false,元素渲染出来后是一个注释标签。所以,v-if 指令的本质是根据表达式的值在 DOM 中生成/移除一个元素。 当 v-if 表达式为 false 时,对应的元素从 DOM 中移除; 否则对应的元素将会被插入 DOM 中。

  • v-show 是什么样子呢?

图中可以看到,v-showfalse 时,是借用 cssdisplay: none; 属性把指定元素隐藏了。

既然 v-show 的原理是改变 display 属性,那么设置 display = block ( display 不为 none ) 能不能使得 v-show = false 的元素显示呢?

神奇的事情出现了,我们是可以手动设置 display 不为 none 来覆盖 v-show = false 的!!

https://www.jianshu.com/p/11b2856b0770