Cara menggunakan v-on:submit untuk mendengar acara penyerahan borang dalam Vue

Vue ialah rangka kerja JavaScript popular yang membantu pembangun membina aplikasi bahagian hadapan interaktif. Borang ialah elemen antara muka yang sangat biasa dalam aplikasi Vue. Apabila pengguna memasukkan data ke dalam borang dan menyerahkannya, kami mungkin perlu mendengar acara penyerahan borang. Artikel ini akan memperkenalkan cara menggunakan arahan v-on:submit dalam Vue untuk mendengar acara penyerahan borang.

Pertama sekali, mentakrifkan elemen bentuk dalam Vue memerlukan penggunaan sintaks pengikatan data Vue. Katakan kita mempunyai borang dengan kotak input dan butang serah:

<div id="app">
  <form v-on:submit="handleSubmit">
    <label for="username">用户名:</label>
    <input type="text" id="username" v-model="username">

    <label for="password">密码:</label>
    <input type="password" id="password" v-model="password">

    <button type="submit">提交</button>
  </form>
</div>

Dalam kod di atas, kami mengikat peristiwa penyerahan borang kepada kaedah handleSubmit dalam contoh Vue melalui arahan v-on:submit. Apabila pengguna memasukkan data dalam borang dan mengklik butang hantar, Vue akan secara automatik memanggil kaedah handleSubmit. Dalam contoh Vue, kita perlu menentukan kaedah handleSubmit untuk mengendalikan acara penyerahan borang:

var app = new Vue({
  el: "#app",
  data: {
    username: '',
    password: ''
  },
  methods: {
    handleSubmit: function() {
      alert('用户名：' + this.username + '，密码：' + this.password);
    }
  }
})

Dalam kod di atas, kaedah handleSubmit muncul kotak dialog untuk memaparkan nama pengguna dan kata laluan yang dimasukkan oleh pengguna dalam bentuk.

Perlu diambil perhatian bahawa dalam kaedah handleSubmit, kami menggunakan kata kunci ini untuk merujuk data dalam contoh Vue. Oleh itu, dalam aplikasi Vue, kita boleh mengakses dan memproses data dalam borang dengan mudah. Selain acara penyerahan borang, Vue juga menyokong acara lain, seperti v-on:click, v-on:mouseover, v-on:keydown, dsb.

Untuk meringkaskan, anda boleh mendengar acara penyerahan borang dengan mudah menggunakan arahan v-on:submit dalam Vue. Tentukan kaedah dalam atribut kaedah bagi contoh Vue untuk mengendalikan acara penyerahan borang. Gunakan sintaks pengikatan data Vue untuk mengakses dan memanipulasi data dalam borang anda dengan mudah. Saya harap artikel ini akan membantu pembangunan borang Vue!

Atas ialah kandungan terperinci Cara menggunakan v-on:submit untuk mendengar acara penyerahan borang dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!