基本概念
v-if,如果条件不成立就不会渲染当前指令所在的节点的dom元素(三元表达式)
v-show只是切换当前dom的显示和隐藏display:none
display | opacity | visivibility | |
---|---|---|---|
显示和隐藏 | 是 | 是 | 否 0是视觉上消失了,透明度为0,在文档流中站位,浏览器会解析 |
性能 | 页面产生回流 | 不会引起回流 | 不会引起回流 |
是否占据空间 | 否 | 是 | 是 |
事件绑定 | 元素不存在 | 占位但是没有事件绑定 | 占位且事件绑定,点击有效 |
子元素继承 | 不会被子元素继承 | 会,设置子元素visibility:visible ;可以让子元素显示出来 | 会,给子元素设置opacity: 1;子元素不会显示 |
怎么选择
v-if可以阻断当前内部代码是否执行,如果条件不成立就不会执行内部逻辑,在第一次加载后确认不会被频繁更改就采用v-if