v-show和v-if的用法和区别

一、用法

v-if是Vue.js中常用的条件渲染指令，根据表达式的值来动态控制元素的显示或隐藏。具体的使用方法如下：

1.基本语法

<div v-if="condition">
  <!-- content -->
</div><div v-if="condition">
  <!-- content -->
</div>

其中，v-if后面跟着一个表达式condition，如果该表达式的值为true，则显示该元素；如果该表达式的值为false，则隐藏该元素。

2.v-if和v-else

<div v-if="condition">
  <!-- content 1 -->
</div>
<div v-else>
  <!-- content 2 -->
</div>

v-if旁边可以添加v-else指令，用于控制选择不同的元素进行显示或隐藏，当v-if的表达式为false时，v-else中的内容会被显示出来。

3.v-if和v-else-if

<div v-if="condition1">
  <!-- content 1 -->
</div>
<div v-else-if="condition2">
  <!-- content 2 -->
</div>
<div v-else>
  <!-- content 3 -->
</div>

v-else-if可以用来检查多个条件，当v-if的表达式为false时，会检查v-else-if中的表达式，如果为true就执行相应的代码块，如果v-else-if的表达式也为false，则执行v-else中的代码块。

4.v-show

<div v-show="condition">
  <!-- content -->
</div>

v-show和v-if类似，用于控制元素的显示和隐藏，不同的是v-show是通过CSS的display属性来控制元素的显示和隐藏，而不是直接从DOM中删除元素。

需要注意的是，v-if和v-show的使用有所不同，如果在需要频繁切换的元素上，建议使用v-show，因为v-if会对DOM进行频繁的增删操作，而v-show仅仅只是控制CSS属性的变化，会更加高效。

以上就是v-if指令的用法，可以根据实际需求进行灵活运用。

二、区别：

1.控制手段不同：

v-show 本质上是通过css的display属性来决定是否显示

如果不显示，则为元素添加css—display:none,也就是说dom元素一直是存在的；

v-if 则是把整个dom元素进行添加或删除

2.编译过程不同：

v-show 只是简单地对css进行切换操作；

v-if 有一个编译/卸载过程，会合适地销毁和重建内部事件监听和子组件

3.编译条件不同：

v-show 都会编译，初始值为false时，只是将display设为none，但它也编译了，并且不会触发组件的生命周期

v-if 是真正的条件渲染，但只有在渲染条件为true时才会进行编译，会触发组件的生命周期

三、v-show与v-if的使用场景

v-show: 在需要非常频繁地进行切换的情况下，使用 v-show 较好

v-if:在运行时条件很少改变时，使用 v-if 较好

四.总结

由于v-if是直接操作dom元素的（增加和删除），所以开销会比v-show大

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗