# v-if (條件判斷)

https://www.cythilya.tw/2017/04/22/vue-conditional-rendering/

※ v-else : 一定是依附在v-if的元素之後，不能在中間穿插別的東西，如果不是連在一起的話就會失效。

※ 當 v-for 和 v-if 需同時使用時，請看以下範例:

<h3>注意事項：v-for 與 v-if 混用</h3>
  <ul>
    <template v-for="(item, key) in products" v-bind:key="item.name">
    <li v-if="item.price <=30">
      {{ item.name}} / {{ item.price }} 元
    </li>
  </template>
  </ul>

ps. 可先在外層使用 template 標籤，並先用 v-for 去將 data()內的 products 資料代入到 item 參數上

在內層的 li 標籤上，加入 v-if 即可使用，但為什麼要怎樣做呢?不可以同時用在同一個元素上嗎?

**因為 v-for 優先級比 v-if 高，故每次渲染都會先循環再進行條件判斷，若要避免出現這種情況，則在外層嵌套template（頁面渲染不生成dom節點），在這一層進行v-for循環，然後在內部進行v-if判斷**

參考文獻:
1. https://segmentfault.com/a/1190000038613668
2. https://ithelp.ithome.com.tw/articles/10275920