vue 的v-if 、v-show和dispaly、visibility
vue官方api给出的解释是：1.v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。2.v-show，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。3.他俩的区别是：v-if 有更高的切换开销，而 v-show 有更高的...
·
- vue官方api给出的解释是：
- 1.v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
2.v-show，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
3.他俩的区别是：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show
较好；如果在运行时条件很少改变，则使用 v-if 较好。
简言之就是：v-if只有当条件为true时，相对应的元素才会生成并加载渲染出来，否则就不存在。
而v-show则是元素一直存在，只是显示不显示的问题。
display的none和block会隐藏显示元素，并且会把元素在页面抹除，即包括BFC位置
而visibility的hidden和visible同样可以隐藏和显示元素，但是无论显示或者隐藏都会保留元素在文档流中的位置。
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)