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