Vue指令v-show和v-if的区别

v-if 和 v-show

在Vue项目的开发中，经常会遇到通过条件判断来显示和隐藏页面的需求，也就是"条件渲染"，我们通常会使用v-if 或 v-show来实现，今天主要讲下两者的区别和应用场景。

1. v-show

• v-show指令的语法: v-show=“表达式”； 表达式为真则显示，为假则隐藏；
• v-show指令的作用：根据表达式真假值切换元素的显示状态；
• v-show指令显示隐藏原理：修改元素的CSS属性(display)来决定实现显示还是隐藏。

实例如下：
显示状态

<template>
  <div>
    <div v-show="true">我是v-show</div>
  </div>
</template>
1
2
3
4
5

隐藏状态

<template>
  <div>
    <div v-show="false">我是v-show</div>
  </div>
</template>
1
2
3
4
5

2. v-if

• v-if指令的语法: v-if=“表达式”； 表达式为真则显示，为假则隐藏；
• v-if指令的作用：根据表达式真假值切换元素的显示状态；
• v-if指令显示隐藏原理：通过操纵dom元素来进行切换显示。
• 表达式的值为真的时候元素存在于DOM树中，为假的时候从DOM树中移除。

实例如下：
显示状态

<template>
  <div>
    <div v-if="true">我是v-if</div>
  </div>
</template>
1
2
3
4
5

隐藏状态

<template>
  <div>
    <div v-if="false">我是v-if</div>
  </div>
</template>
1
2
3
4
5

3. v-if 和 v-show的区别和应用场景

区别

1. v-show 切换显示隐藏的时候DOM一直存在，只是控制css的display属性；v-if 是通过操纵dom元素来进行切换显示，切换显示隐藏的时候会通过添加DOM元素，移除DOM元素的来回切换控制的；
2. v-show不支持写在template中，v-if可以；
3. v-show比v-if性能更高，因为v-show只是动态的改变css样式，不需要增删DOM元素；

使用场景

• 如果需要频繁的切换元素的显示和隐藏，使用v-show比较好；如果运行条件很少改变，使用v-if比较好；
• 多种条件判断的情况下，比如id = 1的时候显示1，id为2的时候显示2等等，这种需要v-if，v-else-if和v-else连用的情况下，使用v-if比较好。