Bagaimana untuk mendapatkan kotak teks vue

Vue.js ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna interaktif. Dalam Vue, kotak teks adalah salah satu komponen penting untuk memproses input pengguna. Artikel ini akan memperkenalkan cara membuat kotak teks dalam Vue dan mendapatkan nilainya.

1. Buat kotak teks

Untuk mencipta kotak teks dalam Vue, anda perlu menggunakan arahan v-model Vue. Arahan ini mengikat hubungan antara pembolehubah dan kotak teks Sebarang nilai yang dimasukkan ke dalam kotak teks akan mengemas kini nilai pembolehubah secara automatik. Berikut ialah contoh kotak teks mudah:

<template>
  <div>
    <input type="text" v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

Dalam contoh ini, kami mencipta kotak teks dan mengikatnya dengan pembolehubah mesej menggunakan arahan model-v. Pada masa ini, sebarang nilai yang dimasukkan dalam kotak teks akan mengemas kini nilai pembolehubah mesej secara automatik.

2. Dapatkan nilai kotak teks

Dengan arahan model v, kami boleh mencipta kotak teks dalam Vue dengan cepat. Tetapi bagaimana untuk mendapatkan nilai dalam kotak teks? Kita boleh menggunakan mekanisme acara Vue untuk memantau perubahan dalam nilai kotak teks dan mendapatkan nilai apabila diperlukan.

Dalam Vue, anda boleh menggunakan arahan v-on untuk mendengar acara. Kita boleh menggunakan arahan v-on:input pada kotak teks untuk mendengar peristiwa input dan mendapatkan nilai kotak teks dalam pengendali acara. Berikut ialah contoh:

<template>
  <div>
    <input type="text" v-model="message" v-on:input="updateMessage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    updateMessage(event) {
      this.message = event.target.value;
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan arahan v-on:input pada kotak teks untuk mendengar peristiwa input, dan mendapatkan nilai kotak teks dalam kemas kini pengendali acara. . Kita boleh menggunakan event.target.value untuk mendapatkan nilai kotak teks dan menetapkannya kepada pembolehubah mesej.

Selain menggunakan arahan v-on untuk mendengar acara, kami juga boleh menggunakan atribut yang dikira untuk mendapatkan nilai kotak teks. Nilai atribut yang dikira dikemas kini secara automatik berdasarkan kebergantungannya. Dengan menggunakan getter dan setter dalam harta yang dikira, kita boleh mendapatkan dan menetapkan nilai kotak teks dengan mudah. Berikut ialah contoh menggunakan harta yang dikira:

<template>
  <div>
    <input type="text" v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  computed: {
    messageValue: {
      get() {
        return this.message;
      },
      set(value) {
        this.message = value;
      }
    }
  }
}
</script>

Dalam contoh ini, kami mencipta messageValue harta yang dikira. Melalui getter dan setter, kita boleh mendapatkan dan menetapkan nilai dengan mudah dalam kotak teks. Dalam templat, kami masih menggunakan arahan model-v untuk mengikat kotak teks kepada pembolehubah mesej. Memandangkan sifat yang dikira menggunakan pembolehubah mesej, memasukkan sebarang nilai ke dalam kotak teks secara automatik mengemas kini messageValue.

Ringkasan

Dalam Vue, kotak teks ialah komponen penting untuk memproses input pengguna. Dengan menggunakan arahan v-model, kita boleh membuat kotak teks dengan cepat dan mengikatnya kepada pembolehubah. Dengan mendengar peristiwa atau menggunakan harta yang dikira, kami boleh mendapatkan nilai kotak teks dengan mudah dan mengemas kini nilai jika perlu. Menggunakan petua ini, kami boleh membina antara muka pengguna interaktif dengan cepat dalam Vue.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan kotak teks vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!