Bagaimana untuk merealisasikan pendaftaran dalam vue dan hanya memasukkan nombor

Vue ialah rangka kerja JavaScript yang popular, yang boleh memberikan kami persekitaran pembangunan dan kaedah operasi yang mudah dan pantas. Dalam Vue, kita boleh menggunakan arahan model-v untuk melaksanakan pengikatan data dalam halaman, dan kita boleh menetapkan kotak input untuk memasukkan nombor sahaja.

Dalam pembangunan sebenar, kita selalunya perlu menggunakan kotak input pada halaman, seperti nombor telefon bimbit, kata laluan, dan lain-lain pada halaman pendaftaran. Kadangkala, kami mahu pengguna memasukkan nombor sahaja dan bukan jenis data lain. Jadi, bagaimana untuk menyedari bahawa kotak input dalam Vue hanya boleh memasukkan nombor? Di bawah, kami akan memperkenalkan secara terperinci cara melaksanakan kotak input yang hanya boleh memasukkan nombor dalam Vue.

1. Gunakan JavaScript asli untuk melaksanakan kotak input nombor

Rangka kerja Vue sendiri tidak menyediakan komponen kotak input yang hanya membenarkan input nombor, tetapi kita boleh menggunakan JavaScript asli untuk melaksanakannya Kotak input yang hanya membenarkan nombor untuk dimasukkan. Kaedah pelaksanaan khusus adalah seperti berikut:

<template>
   <div>
      <input type="text" v-model="number" @keyup="filterNumber"/>
   </div>
</template>

Dalam kod ini, kita mula-mula mentakrifkan kotak input dan menggunakan arahan model-v untuk mengikat data dalam kotak input. Seterusnya, kami menggunakan arahan acara @keyup, yang memanggil fungsi filterNumber setiap kali papan kekunci diangkat.

Kod nombor penapis khusus adalah seperti berikut:

<script>
export default {
   data(){
      return {
         number: ""
      }
   },
   methods: {
      filterNumber(){
         this.number = this.number.replace(/[^\d]/g,"")
      }
   }
}
</script>

Dalam kod ini, kami mula-mula mentakrifkan pembolehubah nombor dalam data dan menggunakan ungkapan biasa untuk menentukan sama ada aksara bukan angka hadir , dan jika ada, digantikan dengan aksara nol.

Akhir sekali, lekapkan kaedah filterNumber ke dalam komponen melalui kaedah, dan gunakan arahan acara @keyup dalam templat untuk memanggil kaedah, mencapai kesan hanya membenarkan nombor dimasukkan.

2. Gunakan arahan Vue untuk melaksanakan kotak input nombor

Cara lain untuk melaksanakan kotak input yang hanya membenarkan nombor dimasukkan ialah menggunakan arahan Vue. Arahan Vue ialah konsep penting dalam rangka kerja Vue, yang membolehkan kami memanipulasi elemen DOM dengan lebih mudah. Kaedah pelaksanaan khusus adalah seperti berikut:

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

Dalam kod ini, kami menggunakan arahan v-model.number, yang menukar data dalam kotak input kepada jenis angka. Dengan cara ini, Vue akan menapis secara automatik aksara bukan angka apabila pengguna memasukkannya.

Perlu diambil perhatian bahawa apabila menggunakan arahan v-model.number, pengguna mesti memasukkan data berangka, jika tidak, Vue akan menukarnya kepada nombor 0.

3. Gunakan pemalam pihak ketiga untuk melaksanakan kotak input angka

Selain menggunakan arahan JavaScript dan Vue asli untuk melaksanakan kotak input yang hanya membenarkan input nombor, kami juga boleh menggunakan pemalam pihak ketiga untuk mencapai kesan ini. Dua pemalam yang biasa digunakan diperkenalkan di bawah: v-money dan vue-numeric.

Pemalam v-money ialah pemalam Vue yang direka khas untuk mengendalikan input mata wang secara automatik, dan boleh menetapkan kotak input supaya hanya membenarkan input nombor. Kaedah pelaksanaan khusus adalah seperti berikut:

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

<script>
import money from 'v-money'
Vue.use(money)
export default {
   data(){
      return {
         number: "",
         money: {
            precision: 2,  // 保留小数位数
            allowNegative: false,  // 是否允许输入负数
            prefix: '$',  // 货币符号
            suffix: '',  // 货币符号
            decimal: '.',  // 小数点符号
            thousands: ',',  // 千分位符号
            masked: false  // 是否使用掩码
         }
      }
   }
}
</script>

Dalam kod ini, kami mula-mula mengimport pemalam v-money dan mendaftarkan pemalam menggunakan kaedah Vue.use(). Seterusnya, gunakan arahan v-wang dalam templat, dan tentukan objek wang sebagai parameter arahan v-wang Beberapa parameter boleh ditetapkan dalam objek ini untuk mengawal format dan sekatan kotak input.

Pemalam vue-numeric juga merupakan pemalam Vue yang direka khas untuk mengendalikan input angka, yang boleh melaksanakan kotak input dengan mudah yang hanya membenarkan input nombor. Kaedah pelaksanaan khusus adalah seperti berikut:

<template>
   <div>
      <input type="text" v-model.number="number" v-numeric />
   </div>
</template>

<script>
import VueNumeric from 'vue-numeric'
Vue.use(VueNumeric)
export default {
   data(){
      return {
         number: ""
      }
   }
}
</script>

Dalam kod ini, kami mula-mula mengimport pemalam vue-numeric dan mendaftarkan pemalam menggunakan kaedah Vue.use(). Kemudian, gunakan arahan v-numerik dalam templat untuk mencapai kesan hanya membenarkan nombor dimasukkan.

Ringkasan

Di atas ialah kaedah melaksanakan kotak input yang hanya membenarkan input nombor dalam Vue, termasuk JavaScript asli, arahan Vue dan pemalam pihak ketiga. Dalam pembangunan sebenar, kita boleh memilih kaedah yang sepadan mengikut keperluan projek. Tidak kira kaedah yang digunakan, hasil yang cemerlang dan pengalaman pengguna boleh dicapai, membolehkan pengguna memasukkan data digital dengan cepat dan tepat.

Atas ialah kandungan terperinci Bagaimana untuk merealisasikan pendaftaran dalam vue dan hanya memasukkan nombor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!