v-if/v-show — 显示隐藏

最后更新于:2022-04-02 08:06:23

[TOC] >[success] # v-if /v-show -- 真显示 ~~~ 1.v-if 的特点:每次都会重新删除或创建元素("条件块内的事件监听器和子组件适当地被销毁和重建"), v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块 2.v-show 的特点:不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换 , 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式 3.v-if 有较高的切换性能消耗 4.v-show 有较高的初始渲染消耗(不管真假都创建。v-if 只有真才创建) 5. 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show 6. 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if ~~~ >[info] ## v-if 真显示 ~~~ 1.v-if 条件为真则显示 2.在 '