Điều kiện reactive trong Vue
Hãy làm cho điều kiện trở nên reactive. Ví dụ, hãy làm để một phần tử ẩn đi khi nhấn vào một nút bấm. Giả sử chúng ta có đoạn văn sau:
<template>
<p v-if="visible">text</p>
</template>
Hãy làm cho đoạn văn của chúng ta hiển thị ngay từ đầu:
data() {
return {
visible: true,
}
}
Bây giờ hãy tạo một nút bấm, khi nhấn vào sẽ làm ẩn đoạn văn:
<template>
<button @click="hide">ẩn</button>
<p v-if="visible">text</p>
</template>
Phương thức được bind sẽ thay đổi thuộc tính visible thành false, qua đó làm cho đoạn văn của chúng ta ẩn đi:
methods: {
hide: function() {
this.visible = false;
}
}
Có một đoạn văn và một nút bấm. Giả sử đoạn văn bị ẩn ngay từ đầu. Hãy tạo một nút bấm để hiển thị đoạn văn.
Có một đoạn văn và hai nút bấm. Giả sử nút bấm thứ nhất hiển thị đoạn văn, còn nút thứ hai - ẩn nó đi.
Hãy sửa đổi bài toán trước đó sao cho trên màn hình luôn chỉ hiển thị một trong các nút bấm: nếu đoạn văn được hiển thị thì là nút để ẩn, còn nếu bị ẩn - thì là nút để hiển thị.
