Directive v-show trong Vue

Một lựa chọn khác để hiển thị có điều kiện là directive v-show. Cách sử dụng rất giống:

<template>
	<p v-show="isAuth">
		+++
	</p>
</template>

Điểm khác biệt là phần tử với v-show sẽ luôn được render và giữ lại trong DOM, còn chỉ có thuộc tính CSS display của nó được chuyển đổi.

Directive v-if thực hiện việc render có điều kiện "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 được hủy đúng cách và tái tạo lại khi điều kiện chuyển đổi.

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

So sánh với, v-show đơn giản hơn nhiều - phần tử luôn được render, bất kể trạng thái ban đầu, 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í render ban đầu lớn hơn. Vì vậy hãy sử dụng v-show, nếu việc chuyển đổi sẽ thường xuyên, và ưu tiên v-if, nếu điều kiện có thể không thay đổi trong thời gian chạy.

Directive v-show không thể được sử dụng trên phần tử template và nó không hoạt động với v-else.

Cho trước một đoạn văn và một nút bấm. Hãy làm sao để đoạn văn được bật/tắt khi nhấn vào nút bấm.

Hãy trình bày sự khác biệt giữa các directive v-show và v-if.

Hãy trình bày khi nào nên sử dụng directive v-show, và khi nào - v-if.

Hãy trình bày những hạn chế mà directive v-show có.