v-if
<script src="../libs/vue.js"></script>
<div id="app">
<!--v-if 判断是否满足条件-->
<div v-if="seen">
你可以看见我了
</div>
<div v-else>看不见了</div>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A B C
</div>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
seen: true,
type:'A'
}
})
</script>
v-show
<script src="../libs/vue.js"></script>
<div id="app">
<!--v-show 根据条件展示元素-->
<!--始终在dom中渲染和保留，切换只是改变了css的display-->
<h1 v-show="seen">hello vue</h1>
<!--v-show 不支持template 也不支持v-else-->
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
seen: true,
}
})
</script>
比较：
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
不推荐同时使用 v-if 和 v-for。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
