La zone de saisie Vue ne peut pas saisir de nombres négatifs

Vue est un framework JavaScript populaire utilisé pour développer des applications Web. Vue rend le développement front-end plus facile et plus intuitif car Vue est réactif, ce qui signifie que lorsque les données changent, la page est automatiquement mise à jour. Les zones de saisie sont l'un des composants couramment utilisés dans les applications Vue. Cependant, nous pouvons parfois avoir besoin de limiter le type ou la plage de valeurs saisies par l'utilisateur, par exemple, nous n'autorisons pas l'utilisateur à saisir des nombres négatifs. Cet article expliquera comment implémenter cette fonctionnalité dans Vue.

1. Utilisez la directive v-model

La directive v-model est utilisée pour lier la valeur de l'élément de formulaire à l'attribut data dans le composant Vue. Dans la zone de saisie, la directive v-model nous permet d'obtenir facilement la valeur saisie par l'utilisateur et d'opérer dessus. Vous pouvez utiliser la directive v-model pour vérifier si la valeur saisie par l'utilisateur est un nombre négatif. Par exemple :

<input type="number" v-model="value" min="0" @input="checkNegative">

Dans cet exemple, nous utilisons une zone de saisie avec un attribut de type "number" et la lions à l'attribut value dans le composant Vue. De plus, nous définissons l'attribut min sur 0, garantissant que la valeur ne peut pas être négative. Lorsque l'utilisateur entrera, nous appellerons la méthode checkNegative pour vérifier si la valeur saisie est négative :

checkNegative() {
  this.value = Math.max(0, parseInt(this.value));
}

Dans la méthode checkNegative, nous convertissons la valeur saisie en un entier et la comparons avec 0. Si la valeur d'entrée est inférieure à 0, elle est définie sur 0. De cette façon, nous pouvons empêcher les utilisateurs de saisir des nombres négatifs.

2. Utiliser les propriétés calculées

En plus de la directive v-model, nous pouvons également utiliser des propriétés calculées pour vérifier la valeur saisie par l'utilisateur. Dans une application Vue, les propriétés calculées sont calculées en fonction des propriétés de données du composant Vue. Nous pouvons utiliser des propriétés calculées pour vérifier si la valeur saisie par l'utilisateur est négative et mettre à jour notre composant Vue. Par exemple :

<template>
  <div>
    <input type="number" v-model="value" @input="updateValue" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0
    };
  },
  computed: {
    checkedValue: function() {
      return Math.max(0, this.value);
    }
  },
  methods: {
    updateValue: function(event) {
      this.value = parseInt(event.target.value);
    }
  }
};
</script>

Dans cet exemple, nous définissons une propriété calculée appelée "checkedValue" qui est calculée en fonction de la propriété value. Dans la propriété calculée, nous mettons à jour la propriété value avec une valeur supérieure ou égale à 0. Dans la zone de saisie, nous lions la valeur de la zone de saisie à l'attribut value au lieu de l'attribut vérifiéValue. Chaque fois que l'utilisateur entre une entrée, nous mettrons à jour l'attribut value à l'aide de la méthode updateValue.

3. Utiliser des instructions personnalisées

En plus des instructions du modèle V et des propriétés calculées, nous pouvons également utiliser des instructions personnalisées pour empêcher les utilisateurs de saisir des nombres négatifs. Les directives personnalisées sont une fonctionnalité avancée de Vue qui nous permet de personnaliser le comportement des éléments DOM. Nous pouvons utiliser des directives personnalisées pour contrôler la saisie de l'utilisateur et garantir qu'il ne saisit pas de nombres négatifs.

<template>
  <div>
    <input v-negative-number v-model="value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0
    };
  },
  directives: {
    "negative-number": function(el, binding) {
      el.addEventListener("input", function(event) {
        var currentValue = parseInt(event.target.value);
        if (currentValue < 0) {
          event.target.value = 0;
          return binding.value;
        } else {
          event.target.value = currentValue;
          return currentValue;
        }
      });
    }
  }
};
</script>

Dans cet exemple, nous définissons une directive personnalisée appelée "nombre-négatif". Dans la directive, nous utilisons la méthode addEventListener pour écouter les événements d'entrée. Dans le gestionnaire d'événements, nous vérifions si la valeur saisie par l'utilisateur est négative. Si l'entrée est un nombre négatif, elle est définie sur 0, sinon elle reste inchangée.

Résumé

Dans cet article, nous avons présenté trois méthodes différentes pour empêcher les zones de saisie dans les applications Vue de saisir des nombres négatifs. Que vous fournissiez cette fonctionnalité via des directives v-model, des propriétés calculées ou des directives personnalisées, Vue offre une grande flexibilité. Nous espérons que cet article vous aidera à mieux comprendre Vue et à améliorer l'efficacité de votre développement d'applications Vue.

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!