今天來看v-if條件渲染吧！什麼是v-if條件渲染？就是一個「如果(if)…」我指定條件達成了，那我才要呈現指定的內容，沒達成的話就是隱藏！聽起來有點抽象，那又該如何使用它？現在就來實做個範例吧！

v-if範例實做

先來寫個簡單的範例！用法很容易，直套用到想要效果的結構上就行：

<template>
  <div class="news">
    <h3 v-if="yes">我學會v-if了！</h3>
  </div>
</template>

<script>
export default {
  name: 'news',
  data() {
    return {
      yes: true
    }
  }
}
</script>

v-if範例解說

• 我直接在標籤<h3>上加了v-if，並在後面加入我為條件取的名字，我簡單取名叫yes。
• 到data()內加入條件是否成立yes: true(true代表成立，反之false代表不成立)。
  完成後你會看到頁面上的文字內容了！接著可以試著改為yes: false，文字就會被隱藏！好簡單吧！

v-else範例

那有「如果成立(if)」因該也會有「如果不成立(else)」吧？沒錯！對js有點了解的人馬上就會想到這點！而它的寫法當然就會是v-else了，直接加在剛剛的實例試試：

<template>
  <div class="news">
    <h3 v-if="yes">我學會v-if了！</h3>
    <h3 v-else>再讓我試一次</h3>
  </div>
</template>

<script>
export default {
  name: 'news',
  data() {
    return {
      yes: false
    }
  }
}
</script>

完成！直接加上去就行了！不過要記得v-else需要跟在v-if之後喔，這樣它們才會被判斷為一組條件！

那…如果v-if顯示內容很多，怎麼半？直接把v-if放在它們的父層結構就行！比如說：

<div v-if="yes">
  <h3>我學會v-if了！</h3>
  <p>好簡單喔！我馬上就會了！</p>
</div>
<h3 v-else>再讓我試一次</h3>

可是…我不想要多一層<div>只為了包起它們怎麼半？還記得昨天說<template>是隱藏標籤嗎？靠它來幫忙分組就好了：

<template v-if="yes">
  <h3>我學會v-if了！</h3>
  <p>好簡單喔！我馬上就會了！</p>
</template>
<h3 v-else>再讓我試一次</h3>

v-else-if範例

那有多組條件怎麼半？這時就要用v-else-if了：

<template>
  <div class="news">
    <ul>
      <li v-if="item1">打掃房間</li>
      <li v-else-if="item2">上網學習vue</li>
      <li v-else-if="item3">到便利商店領包裹</li>
      <li v-else>今天待辦事項都完成了！</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'news',
  data() {
    return {
      item1: false,
      item2: false,
      item3: false
    }
  }
}
</script>

當事情都完成(條件寫入false)就會出現「今天待辦事項都完成了！」，很實用的功能吧！

v-show

還有一個跟v-if(有條件的渲染)很像的v-show(無條件的渲染)！它的用法跟v-if一樣！簡單說，v-show的差別只在它沒有「如果不成立(else)」這個條件！
那為何還要分v-show出來呢？只要用v-if就好啦！v-show還是有它的優點的，它有更高的初始渲染開銷(簡單說就是：元件切換狀態的速度比較快)，因此遇到需要常開關、又沒有條件的需求，當然用v-show比較好！

v-if與route

我再補充一個v-if的常用用法！它可以配合route來設定元件在哪頁才要出現！比如說我有一個網站在未登入時，layout的<header>要顯示「登入」按鈕讓使用者做登入，但如果已經在登入頁了，我就不需要出現它，該怎麼做？簡單寫個例子：

<a v-if="$route.path !='/'">登入</a>

上面看到的是「登入」按鈕，v-if加入條件$route.path !='/loging'。

• 還記得上次學的「Vue[10]-Router( https://ithelp.ithome.com.tw/articles/10204021 )」嗎？我們為每個頁面設定了path:後面是它的網址名稱，$route.path就是在指它！
• != 這是什麼？「=」號就是等於，那「!」號呢？它是「相反」的意思，也就是「不等於」！
  所以整句的意思是，「如果(v-if)：位址不是登入頁(/loging)的話，就出現「登入」按鈕」。

以上就是v-if與v-show的介紹！