条件渲染 之 v-if 和 v-show 的区别

vue动态显示DOM元素常用 v-if 和 v-show 这两种方式,但这两种是有区别的:

  • v-if:当条件为false时,包含v-if指令的元素,根本就不会存在与dom中
  • v-show:当条件为false时,v-show只是给元素添加一个行内样 display:none
区别 v-if v-show
实现方式 动态地向DOM树内添加或者删除DOM元素 设置DOM元素的display样式属性来控制显隐(display="none")
编译过程 切换有一个局部编译/卸载的过程(切换过程中合适地销毁和重建内部的事件监听和子组件) 控制css进行切换
编译条件 初始值为false就不编译;只有在第一次条件变为真时才开始局部编译 在任何条件下(首次条件是否为真)都被编译
性能消耗 不停的销毁和创建(v-if 的初始化较快,但切换代价高) 只编译一次,保留DOM元素,之后通过控制css来控制显隐 (v-show 初始化慢,但切换成本低,性能更好)
使用场景 适合仅切换一次或不频繁切换的场景(应用更广) 适合频繁切换的场景(不常用)

eg1:




    
    Document
    


    

{{message}}

{{message}}

eg2:




    
    Document
    


    
v-if和v-show都能实现元素的隐藏和显示,但v-if是将元素添加到dom或从dom移除,而v-show是通过为元素添加或移除{display:none}属性来实现隐藏和显示
我有一头小毛驴
我又有一头小毛驴

拓展:display:none 和 visible:hidden 都能把网页上某个元素隐藏起来。两者区别为:

  • display:none ---使该对象在页面上彻底消失,通俗来说就是看不见也摸不到。
  • visible:hidden--- 使对象在网页上不可见,即在网页中不占任何的位置。

你可能感兴趣的:(条件渲染 之 v-if 和 v-show 的区别)