Nguồn:

https://vuejs.org/guide/essentials/conditional.html

Cơ bản về conditional rendering :

Hôm nay mình sẽ hướng dẫn các bạn về condition rendering . Conditional Rendering giúp chúng ta có thể hiển thị hoặc ẩn các phần tử trong DOM dựa trên các điều kiện cụ thể. VueJS cung cấp hai phương thức chính để thực hiện điều này: v-if, v-else-if, v-else và v-show. Hãy cùng nhau tìm hiểu chi tiết nhé! 🤓

v-if

V-if được sử dụng khi render một block . Block đó chỉ được render khi điều kiện đó trả về true

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

v-else

Bạn sử dụng v-else để chỉ ra khối "else block " cho v-if Một v-else phải theo ngay sau v-if hoặc v-else-if nếu không nó sẽ không được nhận dạng.

<button @click="awesome = !awesome">Toggle</button>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-else-if

Sử dụng khi có nhiều điều kiện hơn . Nó là khối "else if block" cho v-if Tương tự như v-else, một v-else-if phải theo ngay sau v-if hoặc v-else-if.

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

v-else-if

Sử dụng khi có nhiều điều kiện hơn . Nó là khối "else if block" cho v-if Tương tự như v-else, một v-else-if phải theo ngay sau v-if hoặc v-else-if.

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

v-if on < TEMPLATE >

Bởi vì v-if là một directive, nên 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 kiểm tra trên nhiều phần tử thì sao? Trong trường hợp này, chúng ta có thể sử dụng v-if trên một phần tử template, phần tử này đóng vai trò như một bao bọc vô hình. 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>Title</h1>
</template>

v-show

Một tùy chọn khác để hiển thị một phần tử có điều kiện là v-show directive. Cách sử dụng phần lớn giống nhau: Sự khác biệt là phần tử v-show sẽ luôn được hiển thị và nằm trong DOM; v-show chỉ enable/disable thuộc tính CSS của phần tử.

v-show không hỗ trợ template phần tử này và cũng không hoạt động với v-else <h1 v-show="ok">Hello!</h1>

v-if vs v-show

v-show: Dùng khi bạn cần hiển thị hoặc ẩn phần tử thường xuyên mà không cần thêm/xóa khỏi DOM. v-show chỉ thay đổi thuộc tính CSS display, giúp thao tác nhanh hơn. Thường áp dụng với các component nhỏ nhẹ mà có thể được bật tắt liên tục (ví dụ tooltip)

v-if with v-for

Sử dụng v-if và v-for trên một phần tử v-if sẽ được ưu tiên cao hơn.