Comment réaliser l'inscription dans vue et saisir uniquement des chiffres

Vue est un framework JavaScript populaire, qui peut nous fournir un environnement de développement et une méthode de fonctionnement pratiques et rapides. Dans Vue, nous pouvons utiliser la directive v-model pour implémenter la liaison de données dans la page, et nous pouvons définir la zone de saisie pour saisir uniquement des nombres.

Dans le développement réel, nous devons souvent utiliser des zones de saisie sur la page, telles que le numéro de téléphone portable, le mot de passe, etc. sur la page d'inscription. Parfois, nous souhaitons que les utilisateurs saisissent uniquement des chiffres et non d’autres types de données. Alors, comment se rendre compte que la zone de saisie de Vue ne peut saisir que des nombres ? Ci-dessous, nous présenterons en détail comment implémenter une zone de saisie qui ne peut saisir que des nombres dans Vue.

1. Utilisez JavaScript natif pour implémenter une zone de saisie de nombres

Le framework Vue lui-même ne fournit pas de composant de zone de saisie qui permet uniquement la saisie de nombres, mais nous pouvons utiliser JavaScript natif pour implémenter une zone de saisie qui autorise uniquement la saisie de chiffres. La méthode d'implémentation spécifique est la suivante :

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

Dans ce code, nous définissons d'abord une zone de saisie et utilisons la directive v-model pour lier les données dans la zone de saisie. Ensuite, nous utilisons la directive d'événement @keyup, qui appelle la fonction filterNumber à chaque fois que le clavier est relevé.

Le code spécifique du filtreNumber est le suivant :

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

Dans ce code, nous définissons d'abord une variable numérique dans les données et utilisons une expression régulière pour déterminer s'il y a des caractères non numériques dans la variable. Si tel est le cas, remplacez-la. avec le caractère nul.

Enfin, montez la méthode filterNumber dans le composant via des méthodes et utilisez la directive d'événement @keyup dans le modèle pour appeler la méthode, obtenant ainsi l'effet d'autoriser uniquement la saisie de nombres.

2. Utilisez les directives Vue pour implémenter les zones de saisie de nombres

Une autre façon d'implémenter une zone de saisie qui permet uniquement la saisie de nombres consiste à utiliser les directives Vue. La directive Vue est un concept important dans le framework Vue, qui nous permet de manipuler les éléments DOM plus facilement. La méthode d'implémentation spécifique est la suivante :

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

Dans ce code, nous utilisons l'instruction v-model.number, qui convertit les données de la zone de saisie en un type numérique. De cette façon, Vue filtrera automatiquement les caractères non numériques lorsque les utilisateurs les saisiront.

Il convient de noter que lors de l'utilisation de la directive v-model.number, l'utilisateur doit saisir des données de type numérique, sinon Vue les convertira en nombre 0.

3. Utilisez des plug-ins tiers pour implémenter des zones de saisie de nombres

En plus d'utiliser des instructions natives JavaScript et Vue pour implémenter des zones de saisie qui permettent uniquement la saisie de nombres, nous pouvons également utiliser des plug-ins tiers pour y parvenir effet. Deux plug-ins couramment utilisés sont présentés ci-dessous : v-money et vue-numeric.

Le plug-in v-money est un plug-in Vue spécialement conçu pour gérer la saisie de devises. Il peut formater automatiquement la saisie de devises et définir la zone de saisie pour autoriser uniquement la saisie de chiffres. La méthode d'implémentation spécifique est la suivante :

<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>

Dans ce code, nous importons d'abord le plug-in v-money et utilisons la méthode Vue.use() pour enregistrer le plug-in. Ensuite, utilisez la directive v-money dans le modèle et définissez un objet monétaire comme paramètre de la directive v-money. Certains paramètres peuvent être définis dans cet objet pour contrôler le format et les restrictions de la zone de saisie.

Le plug-in Vue-numeric est également un plug-in Vue spécialement conçu pour gérer la saisie numérique, qui peut facilement implémenter une zone de saisie qui permet uniquement la saisie de nombres. La méthode d'implémentation spécifique est la suivante :

<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>

Dans ce code, nous importons d'abord le plug-in vue-numeric et utilisons la méthode Vue.use() pour enregistrer le plug-in. Ensuite, utilisez la directive v-numeric dans le modèle pour obtenir l'effet d'autoriser uniquement la saisie de nombres.

Résumé

Ce qui précède explique comment implémenter une zone de saisie qui permet uniquement de saisir des nombres dans Vue, y compris du JavaScript natif, des instructions Vue et des plug-ins tiers. En développement réel, nous pouvons choisir la méthode correspondante en fonction des besoins du projet. Quelle que soit la méthode utilisée, d’excellents résultats et une excellente expérience utilisateur peuvent être obtenus, permettant aux utilisateurs de saisir des données numériques rapidement et avec précision.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!