7.vue中的v-if和v-show怎么理解

110 阅读1分钟

基本概念

v-if,如果条件不成立不会渲染当前指令所在的节点的dom元素(三元表达式)

v-show只是切换当前dom的显示和隐藏display:none

displayopacityvisivibility
显示和隐藏否 0是视觉上消失了,透明度为0,在文档流中站位,浏览器会解析
性能页面产生回流不会引起回流不会引起回流
是否占据空间
事件绑定元素不存在占位但是没有事件绑定占位且事件绑定,点击有效
子元素继承不会被子元素继承会,设置子元素visibility:visible ;可以让子元素显示出来会,给子元素设置opacity: 1;子元素不会显示

怎么选择

v-if可以阻断当前内部代码是否执行,如果条件不成立就不会执行内部逻辑,在第一次加载后确认不会被频繁更改就采用v-if