Coding Diary

Vue-101-Day 8

24 May 2019 |

當網頁中某項內容必須是有條件顯示(Conditional Rendering)，就可以使用v-if這個directive。

若v-if回傳的是一個truthy value，則會顯示該內容，以下是簡易的範例，

<div id="app-8">
  <h1 v-if="isShow">I'm here.</h1>
</div>

var vm5 = new Vue({
  el: '#app-8',
  data: {
    isShow: true
  }
})

可以加上v-else作為任何條件皆不符合時，所要顯示的內容

註： v-else 必須在 v-if 或是 v-else-if 後面顯示

<div id="app-8">
  <h1 v-if="isShow">I'm here.</h1>
  <h1 v-else>noooooo.</h1>
</div>

在template元素上使用 v-if

v-if必須附加在element上，若想切換多個元素，可以在template元素上使用並將它當作invisible wrapper，渲染的結果將不包含template元素

<div id="app-8">
  <template v-if="isShow">Hola</template>
</div>

渲染畫面如下 render view

有多個條件必須判斷時，就可以使用v-else-if接續下去，但是在2.1以上才提供這個directive，範例如下

<div id="app-8">
  <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>

註：與v-else一樣，必須在 v-if 或是 v-else-if 後面顯示

使用key決定重複使用的元素

Vue會盡可能有效的渲染元素到畫面上，通常會重複使用既有元素，而不是從頭渲染

<div id="app-8">
  <div v-if="isShow">
    <input type="text" placeholder="條件成立" />
  </div>
  <div v-else>
    <input type="text" placeholder="條件不成立" />
  </div>
  <button @click="toggle">切換條件</button>
</div>

var vm5 = new Vue({
  el: '#app-8',
  data: {
    isShow: true
  },
  methods: {
    toggle: function () {
      this.isShow = !this.isShow
    }
  }
})

上述代碼輸入完值後，再切換的時候會發現輸入值不會被清掉，因為兩個template都使用相同元素(input)，input不會被替換掉，只有placeholder的值被撤換

可以使用key區別兩個元素，加上key帶入唯一值，輸入完值之後，點選切換就會重新渲染，也不會重複使用相同元素

<div id="app-8">
  <div v-if="isShow">
    <input type="text" placeholder="條件成立" key="input_address" />
  </div>
  <div v-else>
    <input type="text" placeholder="條件不成立" key="input_job" />
  </div>
  <button @click="toggle">切換條件</button>
</div>

v-show

另一個Conditional Rendering的方式為 v-show，使用方法與v-if一致，語法如下。

<div id="app-9">
  <h1 v-show="ok">Hello!</h1>
</div>

與v-if不一樣的是，帶有v-show的元素會被保留在DOM，無論條件是否成立，即是切換元素的CSS的display屬性

v-show

註：v-show不支持template元素，也不支持v-else

參考資料：

Comments