條件判斷使用 v-if 指令，指令的表達式傳回 true 時才會顯示：
在元素中使用 v-if 指令：
<div id="app">
<p v-if="seen">現在你看到我了</p>
</div>
<script>
const app = {
data() {
return {
seen: true /* 改為false，資訊就無法顯示 */
}
Vue.createApp(app).mount('#app')
</script>
這裡， v-if 指令将根據表達式 seen 的值( true 或 false )來決定是否插入 p 元素。
因為 v-if 是一個指令，是以必須将它添加到一個元素上。如果是多個元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最終的渲染結果将不包含 <template> 元素。
在 <template> 元素上使用 v-if 指令：
<template v-if="seen">
<h1>網站</h1>
<p>Google</p>
<p>Runoob</p>
<p>Taobao</p>
</template>
可以用 v-else 指令給 v-if 添加一個 "else" 塊：
随機生成一個數字，判斷是否大于 0.5，然後輸出對應資訊：
<div v-if="Math.random() > 0.5">
随機數大于 0.5
<div v-else>
随機數小于等于 0.5
v-else-if 即 v-if 的 else-if 塊，可以鍊式的使用多次：
判斷 type 變量的值：
<div v-if="type === 'A'">
A
<div v-else-if="type === 'B'">
B
<div v-else-if="type === 'C'">
C
Not A/B/C
type: "C"
v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之後。
我們也可以使用 v-show 指令來根據條件展示元素：
<h1 v-show="ok">Hello!</h1>