v-if和v-show的共同点:
都是判断显示和隐藏。
v-if和v-show的不同点:
1.v-show:
先看代码:
{{name}}
<button @click=“handleClick”>切换
我在data里面定义show属性,默认值为true,
控制台显示:
点击却换按钮:
v-if:
<div>
<div v-if="IF">{{name}}</div>
<button @click="handleClick">切换</button>
</div>
跟上面一样在data里面设置IF,默认值为true。
控制台显示:
点击切换按钮:
总结:
v-show:显示或者隐藏,它是根据css属性display:none;来控制的。不管显示隐藏标签都在。
v-if:它是节点直接删除dom或者添加。
如果频繁切换,建议使用v-show(初始化开销较大,切换开销较小),
反过来不频繁切换,使用v-if(初始化较小,频繁切换非常消耗性能)。