Vue.js 學習旅程Mile 12 – Conditional Rendering 條件渲染篇:v-if、v-show


Posted by yuhantaiwan on 2020-05-24

v-if

設定 v-if 的元素只會在其 Value 為 Truthy 時被渲染。

<div id="app">
  <span v-if="isA">A</span>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    isA: true
  }
});

當 isA 為 true 時 <span>A</span> 會出現在畫面上,但當 isA 為 false 時,<span>A</span> 整個 DOM 會不存在於 HTML 內。

v-else、v-else-if

可以搭配 v-else-ifv-else 來做判斷運算。

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

注意事項

  • v-else 沒有 Value ,它是一個單純的 Directive。
  • v-else-if 可以使用多次。
  • v-else-ifv-else 相同必須緊跟在 v-if 或是 v-else-if 設置元素之後,而且必須是同一層的元素。

使用 template 包裹多層元素

因為 v-if 只能使用在一個元素上,所以當需要多個元素做切換時,可以使用 <template> 這個標籤把多個元素包裹起來。

<template> 標籤只做包裹元素之用,實際被渲染出來時,並不存在,因此不影響原本網頁元素的配置。

<span v-if="isA">A1</span>
<span v-if="isA">A2</span>
<span v-if="isA">A3</span>

等同於下例

<template v-if="isA">
  <span>A1</span>
  <span>A2</span>
  <span>A3</span>
</template>

使用 key 決定可重覆使用的元素

Vue 會儘可能高效地渲染元素。如果是相同的結構則會繼續沿用原本的 DOM 元素,並不會重新渲染,用這個方法減少重新渲染所需的資源以提高效能。

<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>

切換 loginType 將不會清除使用者已經輸入的內容。因為兩個模板使用了相同的元素,<input> 不會被替換掉,只是替換了它的 placeholder

所以 Vue 提供了一種方式來表達“這兩個元素是完全獨立的,不要重複使用它們”。只需要添加一個具有唯一值key attribute 即可:

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-show

v-showv-if 在頁面上的效果相同,都是決定元素是否顯示,但其渲染的方式不同。

  • v-if : 真正的建立及銷毀元素。
  • v-show : 元素始終會被渲染並保留在 DOM 中,只是使用 display 的樣式屬性切換顯示效果。
<span v-show="isA">A</span>

等同於下例:

<span style="display: none;">A</span>

注意事項

  • v-show 不支持 <template> 元素,也不支持 v-else

v-if vs v-show

比較兩者在渲染時所需消耗的資源與效能:

  • 在初始渲染時,有元素其值為 false :v-show > v-if
  • 若需頻繁切換元素狀態:v-if > v-show

參考資料


#w3HexSchool #Vue #javascript







Related Posts

Day02 典型統計應用在社群媒體分析(Classical statistics applied to social data) part 2

Day02 典型統計應用在社群媒體分析(Classical statistics applied to social data) part 2

Day 2 - Google Apps Script 設置

Day 2 - Google Apps Script 設置

「文章網址 slug 設定」是什麼?

「文章網址 slug 設定」是什麼?



Comments