Comment réaliser la différence entre la zone de saisie de nombres et la zone de saisie de texte dans Vue

Dans Vue, nous devons souvent utiliser des zones de saisie pour que les utilisateurs puissent saisir des données, mais différentes zones de saisie ont des restrictions et des règles de vérification différentes. Par exemple, la zone de saisie de nombres doit être limitée aux seuls nombres, mais à la saisie de texte. La zone ne limite pas les types d’entrée. Cet article expliquera comment réaliser la différence entre la zone de saisie de nombres et la zone de saisie de texte dans Vue.

1. Utilisez l'attribut type pour distinguer le type de la zone de saisie

Dans Vue, utilisez l'attribut type pour distinguer la zone de saisie en différents types. text" représente du texte. Zone de saisie, type="number" indique une zone de saisie numérique. Lorsque vous utilisez l'attribut type, vous pouvez également définir d'autres valeurs, telles que type="password" pour la zone de saisie du mot de passe, type="email" pour la zone de saisie de l'e-mail, type="tel" pour la zone de saisie du téléphone, etc.

<template>
  <div>
    <label>文本输入框：</label>
    <input type="text" v-model="textValue"></input>
    <br>
    <label>数字输入框：</label>
    <input type="number" v-model.number="numberValue"></input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textValue: '',
      numberValue: 0
    }
  }
}
</script>

Dans le code ci-dessus, nous avons créé deux zones de saisie, l'une est une zone de saisie de texte et l'autre est une zone de saisie de nombres. En définissant différemment l'attribut type, nous pouvons facilement distinguer les deux types de zones de saisie.

2. Utilisez v-model.number pour filtrer les caractères non numériques

Bien que l'attribut type puisse être utilisé pour limiter le type de saisie de la zone de saisie, les utilisateurs peuvent toujours saisissez des caractères non numériques. Afin de garantir que seuls des nombres peuvent être saisis dans la zone de saisie des nombres, nous devons utiliser la directive v-model.number pour filtrer les caractères non numériques.

<template>
  <div>
    <label>数字输入框：</label>
    <input type="number" v-model.number="numberValue"></input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numberValue: 0
    }
  }
}
</script>

Dans le code ci-dessus, il suffit d'ajouter le modificateur .number à la directive v-model pour implémenter la fonction de filtrage des caractères non numériques. De cette façon, même si l'utilisateur essaie de saisir des caractères non numériques, Vue les filtrera automatiquement pour garantir qu'il n'y a que des caractères numériques dans la zone de saisie.

3. Utilisez les attributs min et max pour limiter la plage de saisie numérique

En plus de limiter le type de saisie et de filtrer les caractères non numériques, la zone de saisie numérique peut également être limité en définissant les attributs min et max. La plage de nombres pouvant être saisis.

<template>
  <div>
    <label>数字输入框（0-100）：</label>
    <input type="number" v-model.number="numberValue" min="0" max="100"></input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numberValue: 0
    }
  }
}
</script>

Dans le code ci-dessus, nous limitons la plage de saisie numérique entre 0 et 100 en définissant les attributs min et max. Si le nombre saisi par l'utilisateur est inférieur à 0 ou supérieur à 100, la zone de saisie deviendra automatiquement rouge et ne pourra pas être soumise.

Summary

En utilisant l'attribut type, la directive v-model.number et les attributs min et max, nous pouvons facilement réaliser la différence entre la zone de saisie du nombre et la saisie du texte boîte. Dans le développement réel, il nous suffit d'utiliser ces points de connaissances de manière flexible pour offrir aux utilisateurs une meilleure expérience de saisie.

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!