การรับข้อมูลจากฟอร์มตามเหตุการณ์ใน Vue

สมมติว่าเรามีปุ่มและช่องอินพุตสำหรับป้อนตัวเลข เรามาแสดงผลกำลังสองของตัวเลขที่ป้อนในอินพุตเมื่อกดปุ่มกัน เริ่มต้นการนำไปปฏิบัติกันเลย

สำหรับการแก้ไขปัญหานี้เราต้องการ คุณสมบัติสองอย่าง คุณสมบัติ num จะเปลี่ยนแปลงตามการป้อนข้อมูล ในช่องอินพุต และในคุณสมบัติ res เราจะบันทึก ผลลัพธ์ของการยกกำลังสอง:

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

ตอนนี้เรามาสร้างช่องอินพุต ผูก มันกับคุณสมบัติ num สร้างปุ่ม เมื่อคลิกที่ปุ่มจะเรียกใช้เมธอด calc และสร้างย่อหน้าที่จะ แสดงผลลัพธ์:

<template>
	<p>{{ res }}</p>
	<input v-model="num">
	<button v-on:click="calc">ทำงาน</button>
</template>

เรามาเขียนการนำเมธอด calc ไปปฏิบัติ:

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

ผลลัพธ์คือทันทีที่เมธอด calc ถูกเรียกใช้ (ซึ่งจะเกิดขึ้นเมื่อกด ปุ่ม) ค่าจะถูกเขียนลงในคุณสมบัติ res และในขณะเดียวกันก็จะแสดงผล ในย่อหน้าของเรา

มีช่องอินพุต มีปุ่ม มีย่อหน้า ในช่องอินพุต ป้อนตัวเลข ทำให้เมื่อกด ปุ่ม ในย่อหน้าจะปรากฏรากที่สอง ของตัวเลขนั้น

มีช่องอินพุตสองช่อง มีปุ่ม มีย่อหน้า ในแต่ละช่องอินพุตป้อนตัวเลข ทำให้ เมื่อกดปุ่ม ในย่อหน้าจะปรากฏ ผลรวมของตัวเลขเหล่านี้

มีช่องอินพุตสองช่อง มีปุ่ม ในแต่ละช่องอินพุต ป้อนข้อความบางอย่าง ทำให้ เมื่อกดปุ่ม ข้อความจากช่องอินพุตแรก ไปอยู่ในช่องที่สองและในทางกลับกัน

มีช่องอินพุต 3 ย่อหน้า และปุ่ม ในช่องอินพุต ป้อนชื่อ-นามสกุลผู้ใช้คั่นด้วยช่องว่าง ทำให้ เมื่อกดปุ่ม ในย่อหน้าแรก ปรากฏนามสกุลของผู้ใช้ ใน ย่อหน้าที่สอง - ชื่อ และในย่อหน้าที่สาม - ชื่อกลาง