Vue.js執行個體學習：條件渲染一、v-if 二、v-show注意，v-show 不支援 < template> 元素，也不支援 v-else。 三、v-if vs v-show

一、v-if

在 Vue 中，

v-if 相當于 if(){} ; v-else 相當于 else{} ; v-else-if相當于elseif(){}

v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它将不會被識别。 v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之後。

1、v-if、v-else

<div id="app">
  <p v-if="ok">yes</p>
  <p v-else>no</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  //el: document.getElementById('app'),也對
  data:{
    //ok:0,            //no
    //ok:null,         //no
    //ok:"",           //no
    //ok:undefined,    //no
    //ok:false,        //no
    //ok:,             //報錯
    //ok:" ",          //yes
    //ok:"false",      //yes
    ok:true,           //yes
  }
});
</script> 
           

輸出結果 在注釋中已打出。

也可以在 < template> 元素上使用 v-if 條件渲染分組

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>
           

2、v-else-if

<div id="app">
  <div v-if="type === 'A'">A</div>
  <div v-else-if="type === 'B'">B</div>
  <div v-else-if="type === 'C'">C</div>
  <div v-else>Not A/B/C</div>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    type:'D'
  }
});
</script> 
           

輸出結果：Not A/B/C

3、執行個體

Vue 會盡可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。這麼做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許使用者在不同的登入方式之間切換：

<div id="app">
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address">
  </template>
  <button @click="toggleLoginType">Toggle login type</button>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    loginType:'username'
  },
  methods: {
    toggleLoginType: function () {
      return this.loginType = this.loginType === 'username' ? 'email' : 'username';
    }
  }
});
</script> 
           

點選前：

點選後：

二、v-show

v-show 也是條件渲染指令。

不同v-if的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中。

v-show 隻是簡單地切換元素的 CSS 屬性 display。

<div id="app">
  <div v-show="ok">能看到我嗎？</div>
  <button @click="toggleDisplay">Toggle Display</button>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    ok:1
  },
  methods: {
    toggleDisplay: function () {
      return this.ok = this.ok === 1 ? 0 : 1;
    }
  }
});
</script> 
           

輸出：

點選按鈕後輸出：

注意，v-show 不支援 < template> 元素，也不支援 v-else。

三、v-if vs v-show

1、v-if 是“真正”的條件渲染，因為它會確定在切換過程中條件塊内的事件監聽器和子元件适當地被 銷毀和重建；

v-show 隻是簡單地切換元素的 CSS 屬性 display。

2、v-if “懶“：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

v-show“勤“： 不管初始條件是什麼，元素總是會被渲染，并且隻是簡單地基于 CSS 進行切換。

一般來說，

v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。是以，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運作時條件很少改變，則使用 v-if 較好

。

四、v-if 與 v-for

當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。