条件渲染v-show与v-if

v-show

就是将

display设置为了none

将元素隐藏掉了.
v-show与v-if都能实现显示或隐藏,那么使用哪个呢?
如果切换频繁的话建议使用v-show,因为v-show只是控制display:none
但是

v-if是在DOM节点里面添一个节点删一个节点.存在效率上的问题.

如果多个判断的话也可以用v-if,v-else-if,v-else

按住alt可以选中多行

注意点
如果我们多个h2标签都有相同的条件显示或隐藏

<h2 v-if="true">你好</h2>
<h2 v-if="true">你好</h2>
<h2 v-if="true">你好</h2>

以上有点麻烦.
如果通过一个div将三个h2全部包裹住,然后统一设置v-if这样也能实现效果,但是这样就破坏了结构.

<div  v-if="true">
<h>你好</h2>
<h2>你好</h2>
<h2>你好</h2>
</div>

有一个更好的方法就是通过template进行包裹.

template是模块的意思.它不会破坏代码的结构.

<template  v-if="true">
<h>你好</h2>
<h2