v-show

v-if 在首次渲染的时候,如果条件为假,什么也不操作,页面当作没有这些元素。当条件为真的时候,开始局部编译,动态的向DOM元素里面添加元素。当条件从真变为假的时候,开始局部编译,卸载这些元素,也就是删除。
            
 v-show 不管条件是真还是假,第一次渲染的时候都会编译出来,也就是标签都会添加到DOM中。之后切换的时候,通过display: none;样式来显示隐藏元素。可以说只是改变css的样式,几乎不会影响什么性能。
            
            v-if 和v-show的区别:
            v-if让一个元素彻底消失,而v-show只是把元素在页面中隐藏,相当于display:none

          <div id="app">
		    <h2 v-show="isFlag">v-show只是操作元素的style属性display</h2>
		    <h2 v-if="isFlag">v-if是新增和删除dom元素</h2>
		  </div>

		  <script src="vue.js"></script>
		  <script>
		    const app = new Vue({
		      el:"#app",
		      data:{
		        isFlag:false
		      }
		    })
          </script>


版权声明:本文为Mr_xiaoxuboke原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。