v-if

v-if可以用來做條件渲染(Conditional Rendering)，跟JavaScript的if陳述式裡的程式有點雷同，而Vue可以直接在Html標籤上判斷成立與否，決定是否呈現在頁面上！

用v-if/v-else來決定什麼東西要被渲染

<div id="app">
  <p v-if="showMe">Hi! john cena</p>
  <p v-else>you can't see me!</p>
  <input type="button" id="change" value="切換" @click="changeShow()">
</div>

let app = new Vue({
    el: '#app',
    data: {
        showMe: true
    },
    methods: {
        changeShow(){
            if (this.showMe) {
                this.showMe = false
            } else {
                this.showMe = true
            }
        }
    }
});

透過切換按鈕，改變data showMe的值，來決定要render什麼出來

v-if/v-else-if/v-else一起來

<div id="app">
    <p v-if="bloodType === 'A'">血型A</p>
    <p v-else-if="bloodType === 'B'">血型B</p>
    <p v-else-if="bloodType === 'AB'">血型AB</p>
    <p v-else>血型O</p>
</div>

let app = new Vue({
  el: '#app',
  data: {
    bloodType: 'AB'
  }
});

render

<p>血型AB</p>

因data bloodType是'AB'

v-show

v-show是決定頁面上的是否顯示元素，利用display屬性來控制。

<div id="app">
  <p v-show="isShow">顯示文字</p>
</div>

let app = new Vue({
  el: '#app',
  data: {
    isShow: true
  },
});

render

// isShow = true
<p>顯示文字</p>

// isShow = false
<p display: none>顯示文字</p>

v-if與v-show差異?

• v-if條件為true時會把內容的DOM渲染出來，條件為false時會把DOM移掉，
• v-show一定會把DOM渲染出來，當條件切換時只做display: none的切換。類似於jQuery的show、hide。
• template無法使用v-show。

下篇即將邁入迴圈 v-for.

參考資料：
透過v-if與v-show共用來節省渲染資源
vue-js學習筆記