Tính Reactivity trong Framework Vue

Bất kỳ thay đổi nào đối với dữ liệu từ data sẽ dẫn đến thay đổi ngay lập tức trong việc hiển thị dữ liệu đó trên trang. Hành vi này của Vue được gọi là reactivity.

Hãy kiểm tra trong thực tế. Giả sử chúng ta có thuộc tính sau:

data() {
	return {
		text: 'xxx',
	}
}

Hãy xuất giá trị của thuộc tính này:

<template>
	{{ text }}
</template>

Tạo một nút bấm, khi nhấp vào đó thuộc tính của chúng ta sẽ thay đổi:

<template>
	{{ text }}
	<button @click="change">text</button>
</template>

Bây giờ hãy viết một phương thức sẽ được gọi khi nhấp vào nút và thay đổi thuộc tính:

methods: {
	change: function() {
		this.text = 'yyy';
	}
}

Nếu gộp tất cả code lại với nhau và nhấn vào nút - văn bản trên màn hình sẽ được thay đổi một cách reactive thành văn bản khác.

Cho trước thuộc tính text. Hãy xuất nội dung của thuộc tính này trong một đoạn văn nào đó.

Cho trước một nút bấm. Hãy làm sao để khi nhấp vào nút này, giá trị của thuộc tính text thay đổi một cách reactive sang một giá trị khác.

Cho trước hai nút bấm. Hãy làm sao để khi nhấp vào nút thứ nhất, giá trị của thuộc tính text thay đổi một cách reactive sang một giá trị, còn khi nhấp vào nút thứ hai - sang một giá trị khác.