Lấy dữ liệu biểu mẫu theo sự kiện trong Vue

Giả sử chúng ta có một nút và một trường nhập, nơi một số được nhập vào. Hãy thực hiện việc khi nhấn nút, chúng ta sẽ xuất ra bình phương của số đã nhập vào trường nhập. Hãy bắt đầu thực hiện.

Để giải quyết nhiệm vụ, chúng ta sẽ cần hai thuộc tính. Thuộc tính num sẽ thay đổi khi dữ liệu được nhập vào trường nhập, và vào thuộc tính res chúng ta sẽ ghi kết quả của phép bình phương:

data() {
	return {
		num: 0,
		res: 0
	}
}

Bây giờ hãy tạo một trường nhập, liên kết nó với thuộc tính num, tạo một nút, khi nhấp vào sẽ thực thi phương thức calc, và cũng tạo một đoạn văn, nơi kết quả sẽ được xuất ra:

<template>
	<p>{{ res }}</p>
	<input v-model="num">
	<button v-on:click="calc">work</button>
</template>

Hãy viết phần triển khai của phương thức calc:

methods: {
	calc: function() {
		this.res = this.num ** 2;
	}
}

Kết quả là, ngay khi phương thức calc được gọi (và điều này sẽ xảy ra khi nhấn nút), kết quả sẽ được ghi vào thuộc tính res và đồng thời xuất hiện trong đoạn văn của chúng ta.

Cho một trường nhập. Cho một nút. Cho một đoạn văn. Một số được nhập vào trường nhập. Hãy làm sao để khi nhấn vào nút, đoạn văn xuất hiện căn bậc hai của số đó.

Cho hai trường nhập. Cho một nút. Cho một đoạn văn. Vào mỗi trường nhập, một số được nhập. Hãy làm sao để khi nhấn vào nút, tổng của các số này xuất hiện trong đoạn văn.

Cho hai trường nhập. Cho một nút. Vào mỗi trường nhập một văn bản nào đó được nhập. Hãy làm sao để khi nhấn vào nút, văn bản của trường nhập thứ nhất chuyển sang trường thứ hai và ngược lại.

Cho một trường nhập, 3 đoạn văn và một nút. Vào trường nhập nhập họ và tên người dùng cách nhau bằng dấu cách. Hãy làm sao để khi nhấn vào nút, đoạn văn thứ nhất xuất hiện họ của người dùng, đoạn thứ hai - tên, và đoạn thứ ba - tên đệm.