條件著色

• 條件著色是Vue控制HTML頁面著色的方法之一。我們常透過條件著色的方式控制HTML元素的顯示和隱藏，在Vue中要實現條件著色，可以透過v-if指令和v-show指令。

v-if

• v-if指令是用來根據條件來動態地控制元素的顯示與隱藏。在模板中，當v-if綁定的條件為true時，對應的DOM元素會被渲染，當條件為false時，該元素將被移除。

<div v-if:"show">內容</div>

• 上面這段程式中，當show變數的值為true時內容才會被著色。
• Vue範本中的條件著色v-if類似於JavaScript中的if敘述，因此在Vue範本中同樣可以結合使用v-if與v-else，且中間可穿插v-else-if來實現多分之著色邏輯。

<h1 v-if="mark == 100">滿分</h1>
<h1 v-else-if="mark > 60">及格</h1>
<h1 v-else>不及格</h1>

• v-else：當所有前面的條件都為false時執行。
• v-else-if：作為v-if的附加條件檢查。
• 使用了v-else指令的元素需接在v-if或v-else-if後面，否則不會被辨識到。
• v-if指令必須新增到一個HTML元素上，如果需使用條件同時控制多個標籤時，有兩中方式可實現：
  1. div

  <div v-if="show">
      <p>內容</p>
      <p>內容</p>
      <p>內容</p>
  </div>
  

  2. template

  <template v-if="show">
      <p>內容</p>
      <p>內容</p>
      <p>內容</p>
  </template>
  

v-show

• v-show的用法與v-if類似，兩者同樣是透過設定條件值的真假來決定著色情形。
• 但不同的部分是，v-show不支援template範本及不可與v-else結合使用。
• v-show指令的著色邏輯只是視覺上的條件著色，無論v-show指令設定的條件值是真是假，該元素都會被著色。
• v-show指令實際只是簡單透過切換元素的CSS樣式中的display屬性來實現展示效果。
• 由於v-if與v-show兩種指令的著色邏輯不同，兩者消耗的性能也不同，v-if有更高的切換性能消耗，v-show則是更高的初始著色性能消耗。
• 可以依據使用情境決定當下要使用哪種指令，當元件著色條件會較頻繁地切換時，可以使用v-show指令控制，而若元件著色條件在初始指定後就很少變化，則可以使用v-if。

今天的介紹就到這邊，明天要介紹的是迴圈著色。