Vue Conditional Rendering

這次來介紹 Vue 的條件性渲染，主要的指令有 v-if 和 v-show。

v-if

v-if 指令用於條件性的渲染一個區塊的內容，僅在表達式的回傳值為 truthy 時渲染，若是初始條件為 false 時則不會進行(惰性求值)。
因為會在切換時執行事件監聽和子元件的銷毀和重建，使用 v-if 的時機通常為運行條件很少改變時。

<div id="app">
  <p v-if="seen">現在渲染 v-if</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

視圖：現在渲染 v-if

※ 除了普通的 block 外，v-if 也能作用在 <template> 上

v-else

v-if 的 else 語法，必須要緊接在 v-if 或是 v-else-if 後，才能被識別。

<div id="app">
  <p v-if="seen">現在渲染 v-if</p>
  <p v-else>現在渲染 v-else</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: false
  }
})
</script>

視圖：現在渲染 v-else

v-else-if

v-if 的 else-if 語法，同 v-else，必須要緊接在 v-if 或是 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>非 A/B/C</div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    type: 'B' 
  }
})
</script>

視圖：顯示B

v-show

v-show 指令也是條件性的渲染一個區塊的內容，語法和 v-if 幾乎相同，和 v-if 不同的地方在於，v-show 始終都會渲染，並且表達式回傳的結果是用來切換 css 的 display，而不是決定是否渲染。
因此，使用 v-show 的時機大多在需要頻繁切換塊作用域時。

<div id="app">
  <p v-show="seen">Hello World</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

※ v-show 不能接著使用 v-else，也無法作用在 <template> 上

# Vue, w3HexSchool

Ivy

前端工程師

Taiwan

文章

12

分類

1

標籤

3

追蹤