Rendering theo điều kiện ​

<script setup>
import { ref } from 'vue'
const awesome = ref(true)
</script>

v-if ​

Chỉ thị v-if được sử dụng để hiển thị điều kiện một khối mã. Khối mã này chỉ được hiển thị nếu biểu thức của chỉ thị trả về giá trị đúng (truthy).

<h1 v-if="awesome">Vue is awesome!</h1>

v-else ​

Bạn có thể sử dụng chỉ thị v-else để chỉ định một "khối else" cho v-if:

<button @click="awesome = !awesome">Chuyển đổi</button>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Ôi không 😢</h1>

Một phần tử v-else phải ngay lập tức theo sau một phần tử v-if hoặc v-else-if - nếu không, nó sẽ không được nhận diện.

v-else-if ​

v-else-if, như tên gọi, hoạt động như một "khối else if" cho v-if. Nó cũng có thể được kết nối nhiều lần:

<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>
  Không phải A/B/C
</div>

Tương tự như v-else, phần tử v-else-if phải ngay lập tức theo sau một phần tử v-if hoặc v-else-if.

v-if trên <template> ​

Bởi vì v-if là một chỉ thị, nó phải được gắn vào một phần tử duy nhất. Nhưng nếu chúng ta muốn chuyển đổi nhiều hơn một phần tử, chúng ta có thể sử dụng v-if trên phần tử <template>, đóng vai trò là một bọc ẩn. Kết quả hiển thị cuối cùng sẽ không bao gồm phần tử <template>.

<template v-if="ok">
  <h1>Tiêu đề</h1>
  <p>Đoạn văn 1</p>
  <p>Đoạn văn 2</p>
</template>

v-else và v-else-if cũng có thể được sử dụng với <template>.

v-show ​

Một lựa chọn khác để hiển thị điều kiện của một phần tử là chỉ thị v-show. Cách sử dụng lớn phần giống nhau:

<h1 v-show="ok">Chào bạn!</h1>

Sự khác biệt là một phần tử với v-show sẽ luôn được hiển thị và vẫn tồn tại trong DOM; v-show chỉ chuyển đổi thuộc tính CSS display của phần tử.

v-show không hỗ trợ phần tử <template>, cũng như không hoạt động với v-else.

v-if so với v-show ​

v-if là điều kiện hiển thị "thực sự" vì nó đảm bảo rằng các trình nghe sự kiện và các component con bên trong khối điều kiện được hủy và tạo lại đúng cách khi chuyển đổi.

v-if cũng lười biếng: nếu điều kiện là sai khi hiển thị ban đầu, nó sẽ không làm gì cả - khối điều kiện sẽ không được hiển thị cho đến khi điều kiện trở thành đúng lần đầu tiên.

So với đó, v-show đơn giản hơn nhiều - phần tử luôn được hiển thị bất kể điều kiện ban đầu, với việc chuyển đổi dựa trên CSS.

Nói chung, v-if có chi phí chuyển đổi cao hơn trong khi v-show có chi phí hiển thị ban đầu cao hơn. Do đó, hãy chọn v-show nếu bạn cần chuyển đổi một cái gì đó thường xuyên, và chọn v-if nếu điều kiện ít có khả năng thay đổi khi chạy.

v-if với v-for ​

Khi v-if và v-for đều được sử dụng trên cùng một phần tử, v-if sẽ được đánh giá trước. Xem hướng dẫn về hiển thị danh sách để biết chi tiết.