Ràng buộc dữ liệu hai chiều với input trong Vue

Bây giờ chúng ta sẽ học cách làm việc với các input trong framework Vue. Với sự trợ giúp của chúng, chúng ta sẽ thêm dữ liệu vào trang một cách phản ứng. Hãy bắt đầu. Giả sử chúng ta có một input:

<template>
	<input>
</template>

Giả sử chúng ta cũng có một thuộc tính message:

data() {
	return {
		message: 'hello',
	}
}

Chúng ta có thể liên kết thuộc tính này và input theo cách sao cho việc thay đổi bất kỳ cái nào trong chúng sẽ dẫn đến sự thay đổi của cái kia. Điều này được thực hiện bằng chỉ thị v-model, trong đó chỉ định thuộc tính được ràng buộc với input.

Hãy ràng buộc thuộc tính message của chúng ta với input:

<template>
	<input v-model="message">
</template>

Sau khi chạy mã, trong input sẽ có văn bản của thuộc tính message. Và nếu chỉnh sửa dữ liệu trong input - thuộc tính cũng sẽ thay đổi một cách tương ứng. Để thấy điều này, hãy hiển thị nội dung được nhập vào input ở đâu đó trong một đoạn văn:

<template>
	<input v-model="message">
	<p>{{ message }}</p>
</template>

Có một input. Hãy làm sao cho văn bản được nhập vào input ngay lập tức được hiển thị trong đoạn văn bên dưới nó.

Sửa đổi bài toán trước đó sao cho văn bản được hiển thị ở dạng chữ hoa.

Có một input. Giả sử một số được nhập vào đó. Hãy làm sao cho trong đoạn văn khi nhập sẽ hiển thị bình phương của số được nhập.