v-if VS v-show

先上结论------

相同点：

视觉效果：一样

指令的作用：根据表达式的真假值切换元素的显示状态

语法表达式类似：v-if/show="表达式"

指令后面的"表达式"最终会被解析为布尔值，值为真(true)的时候元素显示，值为假(false)的时候元素不显示

不同点：

显示隐藏：v-if显示隐藏是将dom元素整个销毁和重建；而v-show隐藏则是为该元素添加css--display:none，dom元素还在。

性能消耗及使用场景：v-if操作dom元素，有更高的切换消耗，适用于不太频繁切换；v-show只修改元素的css属性，有更高的初始渲染消耗，适用于频繁切换的场景； v-if能和v-else连用进行分支判断，v-show是不能和v-else连用的，如果出现多种条件场景的情况下，可以使用v-if来进行判断

真实践才敢说真话------

我们以最简单的一个普通按钮来测试一下

先是v-if：

  

<template>
   <el-button v-if="false">默认按钮</el-button>
</template>

使用v-if，我们可以注意到浏览器并没有渲染出以test为class的div， 这是由于v-if只有当判断条件为真时，浏览器才会生成标签并在浏览中渲染，反之判断条件为假时，浏览器将不会生成标签更不会渲染。

接下来是v-show：

 <template>
   <el-button class="test" v-show="false">默认按钮</el-button>
 </template>

使用v-show，div标签和里面的button是会生成并渲染的，但是我们注意到浏览器在我们的内联样式中添加了display:none属性，所以实质上v-show标签是存在的，只是浏览器帮我们隐藏了而已；实际上浏览器只是根据判断条件在更改内联样式，条件为真的时候内联样式display:block；条件为假的时候内联样式更改为display:none

因此也印证了上面的一条： v-if显示隐藏是将dom元素整个销毁和重建；而v-show隐藏则是为该元素添加css--display:none，dom元素还在。

分享---

不知道大家用没用过v-if，v-else，v-else-if，反正我没用过，哈哈哈哈哈哈哈哈哈哈哈哈哈哈，不过我查了一下，跟大家分享：

可以使用 v-else 指令来表示 v-if 的“else 块”

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

示例：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
Not A/B/C
</div>

结论：对比学习印象更加深刻哦~