Hiển thị theo điều kiện trong Vue

Chỉ thị tiếp theo mà chúng ta sẽ tìm hiểu được gọi là v-if. Với nó, bạn có thể hiển thị hoặc ẩn các phần tử. Cách chỉ thị này hoạt động: nó nhận bất kỳ thuộc tính nào của đối tượng data làm tham số. Nếu thuộc tính đó có giá trị true - thì phần tử sẽ được hiển thị, còn nếu là false - thì nó sẽ bị ẩn.

Chúng ta hãy xem một ví dụ. Giả sử chúng ta có một đoạn văn với thuộc tính v-if. Giá trị của thuộc tính này sẽ là thuộc tính visible, như thế này:

<template>
	<p v-if="visible">văn bản</p>
</template>

Hãy đặt giá trị của thuộc tính chúng ta thành true. Trong trường hợp này đoạn văn sẽ được hiển thị:

data() {
	return {
		visible: true,
	}
}

Nhưng nếu đặt visible thành giá trị false, thì đoạn văn sẽ bị ẩn:

data() {
	return {
		visible: false,
	}
}

Giả sử trong data có lưu thuộc tính visible. Giả sử bạn cũng có hai đoạn văn. Hãy thực hiện sao cho đoạn văn đầu tiên được hiển thị trên màn hình, nếu thuộc tính visible bằng true, còn đoạn văn thứ hai, ngược lại, được hiển thị nếu thuộc tính visible bằng false.