การผูกข้อมูลสองทางกับอินพุตใน Vue

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

<template>
	<input>
</template>

สมมติอีกว่าเรามีพรอพเพอร์ตี้ message:

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

เราสามารถเชื่อมโยงพรอพเพอร์ตี้นี้และอินพุต ในลักษณะที่ การเปลี่ยนแปลงของสิ่งใดสิ่งหนึ่ง จะนำไปสู่การเปลี่ยนแปลงของอีกสิ่ง ทำได้โดยใช้ directive v-model ซึ่งภายในจะระบุพรอพเพอร์ตี้ที่ผูกกับอินพุต

ลองผูกอินพุตของเรากับพรอพเพอร์ตี้ message:

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

หลังจากรันโค้ด ในอินพุตจะมีข้อความ ของพรอพเพอร์ตี้ message ปรากฏอยู่ และหากแก้ไขข้อมูลในอินพุต - พรอพเพอร์ตี้ก็จะเปลี่ยนแปลง ตามไปด้วย เพื่อให้เห็นภาพ ลองแสดงผลเนื้อหาที่ป้อนในอินพุต ที่ใดที่หนึ่งในย่อหน้า:

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

กำหนดให้มีอินพุต จงทำให้ข้อความที่ป้อนลงใน อินพุตแสดงผลทันทีในย่อหน้าที่อยู่ด้านล่าง

ปรับเปลี่ยนโจทย์ก่อนหน้า ให้ข้อความแสดงผลในตัวพิมพ์ใหญ่

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