Vue中的内置指令 v-if和v-show

v-if：<p v-if="isShow">内容</p>

作用: 根据布尔值去渲染标签,当为true 就在页面中插入该元素,为false 从页面移除该元素,

可以配合template使用。

注意：Vue中有v-if自然的存在else（v-else），也还有 v-else-if 哦，注意：v-if与v-else语句需要联合使用，如中间加了其他语句，例如P标签，使上下不连贯导致报错，但v-if仍可以使用。

v-if与v-else中间可以使用v-else-if，在render函数里面就是三元表达式

v-show：<p v-show="isShow">内容</p>

作用: 根据布尔值去渲染标签，当为true display:block，为false display:none

v-if和v-show区别——>

v-if控制的是dom移除和添加，v-show控制的是dom样式显示隐藏

如果频繁切换显示与隐藏用v-show，值判断一次用v-if，v-if可以和template连用，但v-show不行

上述有提到过template，那我们来说说它的用法

在使用template时，v-show将失去作用，因为v-show是设置显示和隐藏，而template是没有实际东西的DOM。

template：两个及两个以上的div需要同一个元素控制的时候，用法template 如下

<div v-if="show">                                    <template   v-if="show">                    

<div class="box blue"></div>                  <div class="box blue"></div>                               

<div class="box red"></div>                    <div class="box red"></div>

</div>                                                       </template>

如上左右对比:左边浪费了空间且多声明了一个div