今天來學習條件判斷的指令，Vue提供以下指令可以用來做條件渲染(Conditional Rendering)：

v-if

v-if用來控制元素要不要render出來

<!--html-->
<div id="app">
    <p v-if="showMessage">還剩下21天！</p>
  </div>

<!--js-->
<script>
    new Vue({
      el: "#app",
      data: {
        showMessage: false
      }
    });
  </script>

這邊一開始不讓p出現，設定為false，之後再改成true，重load看看會發生什麼事：

v-if="false"時元素就直接沒render了，#app裡空空如也!

v-else

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

<div id="app">
    <p id="A"  v-if="showMessage">A</p>
    <p id="B"  v-else>B</p>
</div>

showMessage若為true，render #A，若為false就render #B( 非A即B )。

v-else-if

邏輯與javascript的條件判斷式一樣

<div id="app">
    <p id="A"  v-if="showMessageA">A</p>
    <p id="B"  v-else-if="showMessageB">B</p>
    <p id="C"  v-else>C</p>
</div>

邏輯呈現：

v-show

v-show可以與v-if作對照，模式是一樣的，true出現、false就不出現，差別在於 v-show會render出元素，只是用css display來操縱他看不看的到。

今天學習完條件判斷語法，明天開始學習v-for