v-if与v-show的区别

条件渲染

vue中的条件渲染分别为：v-if、v-show，两者都是用来控制元素在页面中的显示，在面试题中经常出现：v-if与v-show有什么区别。

v-if

语法：

v-if="表达式"

[v-else-if="表达式"]

[v-else="表达式"]

<div v-if="1===1">第一个div</div>
<div v-else-if="a===1">第二个div</div>
<div v-else>第三个div</div>

v-show

语法：

v-show="表达式"

<div v-show="1===1">我是div</div>

v-if与v-show的区别

1. v-if适用于切换频率较低的情况,v-show适用于切换频率较高的情况

2. v-if是动态的向DOM树内添加或删除DOM元素，v-show是通过设置DOM元素的display样式属性控制元素的显示(block),隐藏(none)

3. v-if如果初始条件为假则什么也不做，只有在条件第一次变为真时才开始编译；v-show不管初始条件是否为真都会被编译