Cara mengubah suai dan menyerahkan kotak input dalam Vue.js

Vue.js ialah rangka kerja JavaScript moden terasnya ialah pengaturcaraan reaktif bagi paparan dipacu data, memudahkan pembangun mengurus data dan paparan dalam pembangunan bahagian hadapan. Dalam Vue.js, disebabkan perhubungan mengikat dua hala antara data dan paparan, kami boleh mengikat komponen borang (input, kotak semak, radio, dll.) dengan mudah kepada model data. Dan apabila kita perlu mengubah suai nilai borang, bagaimanakah kita boleh menyerahkan pengubahsuaian dengan lebih baik? Seterusnya, kita akan membincangkan cara mengubah suai dan menyerahkan kotak input dalam Vue.js.

Dalam Vue.js, kami biasanya menggunakan arahan model v untuk mengikat komponen bentuk seperti input kepada data. Contohnya, contoh berikut:

<template>
  <div>
    <input v-model="message" type="text">
    <p>你输入的是：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello Vue.js!'
    }
  }
}
</script>

Dalam contoh ini, kami mengikat komponen input secara dwiarah kepada atribut mesej dalam data. Apabila pengguna mengubah suai nilai dalam input, atribut mesej akan dikemas kini dengan sewajarnya, kita juga boleh menukar nilai dalam input dengan mengubah suai atribut mesej.

Tetapi dalam aplikasi sebenar, kami biasanya perlu menyerahkan borang secara manual selepas pengguna melengkapkan pengubahsuaian, bukannya menghantar permintaan ke bahagian belakang setiap kali pengubahsuaian dibuat. Dalam kes ini, kita perlu melaksanakan penyerahan dan pengubahsuaian borang dalam Vue.js.

Secara umumnya, terdapat dua cara untuk menyerahkan perubahan dalam Vue.js:

1. Ikat peristiwa perubahan input

Kita boleh menggunakan acara perubahan untuk memantau perubahan nilai input dan menyerahkan pengubahsuaian ke bahagian belakang apabila peristiwa perubahan dicetuskan. Contohnya, contoh berikut:

<template>
  <div>
    <input @change="handleChange" v-model="message" type="text">
    <button @click="handleSubmit">提交</button>
    <p>你输入的是：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    handleChange () {
      // input 的值已被修改
    },
    handleSubmit () {
      // 将修改提交到后端
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan peristiwa perubahan untuk memantau perubahan nilai input dan mengendalikan perubahan ini dalam kaedah handleChange. Dalam kaedah handleSubmit, kami boleh menyerahkan pengubahsuaian ke bahagian belakang. Kelemahan kaedah ini ialah peristiwa perubahan akan dicetuskan setiap kali nilai input berubah, yang akan meningkatkan permintaan data yang tidak diperlukan.

2. Dengar peristiwa kemas kini input

Kaedah lain ialah mendengar peristiwa kemas kini input Peristiwa ini hanya dicetuskan apabila data terikat berubah, yang boleh dielakkan Permintaan yang tidak perlu semasa mengubah suai. Contohnya, contoh berikut:

<template>
  <div>
    <input @input="handleInput" v-model="message" type="text">
    <button @click="handleSubmit">提交</button>
    <p>你输入的是：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    handleInput () {
      // input 的值已被修改
    },
    handleSubmit () {
      // 将修改提交到后端
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan peristiwa input untuk memantau perubahan nilai input dan mengendalikan perubahan ini dalam kaedah handleInput. Dalam kaedah handleSubmit, kami boleh menyerahkan pengubahsuaian ke bahagian belakang. Berbanding dengan kaedah pertama, kaedah ini hanya akan dicetuskan apabila pengubahsuaian sebenar wujud, mengelakkan permintaan yang tidak perlu.

Ringkasan:

Dalam Vue.js, kita boleh menggunakan arahan model v untuk mengikat komponen bentuk dua hala seperti input kepada data. Apabila kita perlu mengubah suai nilai borang, kita boleh menggunakan dua kaedah: kaedah pertama adalah untuk mendapatkan perubahan nilai dengan mendengar peristiwa perubahan input, dan menyerahkan pengubahsuaian apabila peristiwa dicetuskan; untuk mendengar peristiwa perubahan input Acara kemas kini digunakan untuk mendapatkan perubahan nilai, dan hanya dicetuskan apabila terdapat pengubahsuaian sebenar.

Dalam pembangunan sebenar, kita boleh memilih kaedah pengubahsuaian dan penyerahan yang berbeza mengikut senario yang berbeza. Perlu diingatkan bahawa kedua-dua kaedah pengubahsuaian dan penyerahan harus ditakrifkan dalam kaedah untuk mengelakkan kekeliruan dan ketidakjelasan.

Atas ialah kandungan terperinci Cara mengubah suai dan menyerahkan kotak input dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!