Vue Academy · บทเรียน

v-model บนองค์ประกอบฟอร์มทั้งหมด

Input, textarea, select, checkbox และ radio — วิธีที่ v-model ปรับการทำงานตามชนิดขององค์ประกอบ

v-model บนองค์ประกอบฟอร์มทั้งหมด เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

การผูกช่องกรอกข้อมูลในแบบฟอร์ม

v-model สร้างการผูกข้อมูลสองทางระหว่างตัวควบคุมแบบฟอร์มกับสถานะแบบตอบสนองของคุณ ตัวควบคุมแต่ละชนิด — ช่องข้อความ ช่องทำเครื่องหมาย ปุ่มตัวเลือก รายการเลือก และพื้นที่ข้อความ — ใช้ v-model แตกต่างกันเล็กน้อย บทเรียนนี้ครอบคลุมทั้งหมด

ช่องข้อความ

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

<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

<template>
  <input v-model="name" />
  <p>Hello, {{ name }}</p>
</template>

พื้นที่ข้อความ

พื้นที่ข้อความทำงานเหมือนช่องข้อความทุกประการ ให้ใช้ v-model กับองค์ประกอบโดยตรง — อย่าวางข้อความไว้ระหว่างแท็ก

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

ช่องทำเครื่องหมาย: ค่าบูลีน

ช่องทำเครื่องหมายช่องเดียวที่ผูกกับการอ้างอิงค่าบูลีนจะสลับระหว่าง true และ false

<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>

<template>
  <input type="checkbox" v-model="agreed" />
  <p>Agreed: {{ agreed }}</p>
</template>

ช่องทำเครื่องหมาย: หลายช่องในอาร์เรย์

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

<script setup>
import { ref } from 'vue'
const hobbies = ref([])
</script>

<template>
  <input type="checkbox" value="reading" v-model="hobbies" />
  <input type="checkbox" value="coding" v-model="hobbies" />
  <p>{{ hobbies }}</p>
</template>

ปุ่มตัวเลือก

ปุ่มตัวเลือกในกลุ่มเดียวกันใช้การอ้างอิงร่วมกันหนึ่งรายการ การอ้างอิงจะเก็บค่า value ของตัวเลือกที่เลือกไว้

<script setup>
import { ref } from 'vue'
const picked = ref('')
</script>

<template>
  <input type="radio" value="small" v-model="picked" />
  <input type="radio" value="large" v-model="picked" />
  <p>Picked: {{ picked }}</p>
</template>

รายการเลือก: รายการเดียว

รายการเลือกเดียวจะผูกกับค่าที่ตรงกับตัวเลือกที่เลือก คุณสามารถเตรียมตัวเลือกสำหรับแสดงข้อความแทนที่โดยมีค่าว่างได้ตามต้องการ

<script setup>
import { ref } from 'vue'
const city = ref('')
</script>

<template>
  <select v-model="city">
    <option value="">Choose</option>
    <option value="paris">Paris</option>
    <option value="tokyo">Tokyo</option>
  </select>
</template>

รายการเลือก: หลายรายการ

เพิ่มแอตทริบิวต์ multiple แล้วผูกเข้ากับอาร์เรย์ ตัวเลือกที่เลือกจะถูกรวบรวมไว้ในอาร์เรย์

<script setup>
import { ref } from 'vue'
const cities = ref([])
</script>

<template>
  <select v-model="cities" multiple>
    <option value="paris">Paris</option>
    <option value="tokyo">Tokyo</option>
  </select>
</template>

ตัวปรับค่า

ตัวปรับค่าช่วยปรับการทำงานของ v-model: .trim ลบช่องว่าง, .number แปลงค่าเป็นตัวเลข และ .lazy ซิงค์เมื่อมีการเปลี่ยนแปลงแทนที่จะซิงค์ทุกครั้งที่กดแป้นพิมพ์

<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />

กรอบความคิดเดียว

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

คอมโพเนนต์ช่องกรอกข้อมูลแบบกำหนดเอง

v-model ยังใช้งานกับคอมโพเนนต์ของคุณเองได้ ช่องกรอกข้อมูลแบบกำหนดเองจะประกาศพร็อพเพอร์ตี modelValue และส่งเหตุการณ์ update:modelValue ออกไป จึงทำงานเหมือนตัวควบคุมเนทีฟสำหรับคอมโพเนนต์แม่

<!-- parent -->
<MyTextInput v-model="name" />

<!-- child declares modelValue + emits update:modelValue -->

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความรู้เกี่ยวกับการผูกข้อมูลแบบฟอร์มของคุณ

สรุปทบทวน

v-model กับตัวควบคุมแบบฟอร์ม:

ช่องข้อความและพื้นที่ข้อความผูกกับสตริง
ช่องทำเครื่องหมายช่องเดียวผูกกับค่าบูลีน ส่วนช่องทำเครื่องหมายหลายช่องผูกกับอาร์เรย์
ปุ่มตัวเลือกใช้การอ้างอิงร่วมกันหนึ่งรายการเพื่อเก็บค่าที่เลือก
รายการเลือกผูกกับค่า และเมื่อใช้ multiple จะผูกกับอาร์เรย์
ตัวปรับค่า: .trim, .number, .lazy

คำถามที่พบบ่อย

บทเรียน “v-model บนองค์ประกอบฟอร์มทั้งหมด” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “v-model บนองค์ประกอบฟอร์มทั้งหมด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “v-model บนองค์ประกอบฟอร์มทั้งหมด”

Input, textarea, select, checkbox และ radio — วิธีที่ v-model ปรับการทำงานตามชนิดขององค์ประกอบ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “v-model บนองค์ประกอบฟอร์มทั้งหมด” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Vue Academy