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

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

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

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

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

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

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

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

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