v-if和v-show都是条件渲染指令，用于控制元素或模板的渲染，也就是控制DOM元素的显示和隐藏。
v-if
v-if是“真正”的条件渲染。它控制的是DOM节点
当表达式的值为true或false时，生成或移除一个元素。类似于JavaScript中的if条件判断。
它是惰性的，若在初始渲染时条件为false，什么也不做直到条件值为true时，才会开始渲染条件块。
除了v-if不有v-else-if和v-else。
<template>
<div v-if="isshow">
显示
</div>
<div v-else>
隐藏
</div>
</template>
<script>
export default({
name:'index',
data(){
return{
isshow:true
}
}
})
</script>
v-if中的isshow其值为true，相当于v-if="true"，页面显示内容为“显示”
v-show
它控制的是DOM节点的display属性。不管初始条件是什么，元素总会被渲染，且只是简单基于css进行切换。
当v-show值为true时，DOM元素的display值为block，反之，display值为none。用户看不到元素，但其DOM元素还存在，只是隐藏了而已。
注意：v-show 不支持<template>语法，也不支持v-else语法
两者的使用总结
实际使用中，可根据下面的应用场景情况，选择适合的条件渲染指令。
| v-if | v-show |
|---|
| 开销 | 有更高的切换开销 | 有更高的初始渲染开销 |
| 频繁切换 | | 更好 |
| 运行时条件较少改变 | 更好 | |
补充：v-if 判断是否加载，可以减轻服务器的压力，在需要时才会加载；v-show 调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
