vue中的v-if和v-show的区别

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(初始化较小，频繁切换非常消耗性能)。