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

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

App.vue<template>
  <input>
</template>

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

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

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

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

App.vue<template>
  <input v-model="message">
</template>

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

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