Vue.js Conditional Rendering 條件渲染語法

既然是條件式，就一定有選擇，在程式裡，最簡單也最常用的選擇是使用布林值： true 或 false 只能擇一。利用這種二擇一的特性，去執行我們希望程式做的事。

在 Vue 裡的條件渲染指令有以下兩種：

v-if 和 v-else 一起用

v-if和v-else 一起用的時候，把條件的屬性放在v-if的標籤屬性裡，如果屬性結果是true就會顯示v-if的內容，如果結果是false就會顯示v-else 的內容，在選染頁面部分，我們會發現，如果是false，就連 HTML 的部分也不會被渲染出。

當我們只有有寫v-else如<p v-else>失敗</p>等同是v-else="true"，通常在v-else是不需要給條件的。

需要做切換時，只要使用運算子!將條件調整為@click="yes=!yes" 就可達到切換的效果。

<p v-if="success">成功</p>
<p v-else>失敗</p>

<button @click="success=!success">Switch</button>

v-show 用兩次

v-show通常拿來作為一個切換器，像開關一樣，不是開就是關。如果需要平凡的切換，就使用v-show。

1 2	<p v-show="success">已完成</p> <p v-show="!success">未完成</p>

v-if 和 v-show 的不同之處

v-if可以搭配v-else-if和v-else 而有多選一的機制，但是v-show通常只能二選一。
在渲染的部分，使用v-if只會渲染出達到條件的 HTML，但是v-show會把條件全渲染出來，然後用以style="display: none;"的方式隱藏。

需要多選一的時候就用 v-if

剛剛說過 v-if可以搭配v-else-if和v-else 做出多選一的機制，也很彈性，使用方法也很簡潔，同樣只會炫染出true的部分。

<h4>v-if-else multiple</h4>
<p v-if="light==='red'">紅燈</p>
<p v-else-if="light==='green'">綠燈</p>
<p v-else-if="light==='yellow'">黃燈</p>
<p v-else>燈壞了</p>

JavaScript Vue 實例的部分：

const vm = new Vue({
  el: '#app',
  data: {
    success: false,
    light: ''
  }
});

值得注意的是在 Vue 的官網上說明：不推薦同時使用v-if 和 v-for

當 v-if 與 v-for 一起使用時，v-for會具有比 v-if 更高的優先級。詳細解釋請查閱 Vue 的風格指南 — Vue.js和列表渲染指南：
列表渲染 — Vue.js

條件渲染 — Vue.js