Comment implémenter la fonction cachée de la zone de saisie dans vue

Avec le développement d'applications Web, de plus en plus de scénarios commerciaux nécessitent que les utilisateurs saisissent des données, et la zone de saisie utilisateur est l'un des composants nécessaires pour atteindre cet objectif. Cependant, dans certains cas, nous devons masquer la zone de saisie. Bien sûr, il ne s'agit pas de masquer complètement la zone de saisie, mais de masquer une partie de la zone de saisie, comme le mot de passe saisi, etc. Il est très simple de masquer la zone de saisie dans Vue. Cet article vous amènera à comprendre les détails d'implémentation.

Tout d'abord, nous devons comprendre ce qu'est Vue. Vue est un framework progressif pour créer des interfaces utilisateur. Vue peut être facilement intégré à d'autres bibliothèques ou à des projets existants, et fournit également une API très simple pour permettre aux utilisateurs d'effectuer facilement diverses interactions avec l'interface utilisateur.

Ensuite, nous devons comprendre plusieurs concepts importants dans Vue, à savoir les instances, les composants, les accessoires, les événements et les propriétés calculées de Vue.

• Instance Vue : C'est un concept central de Vue et c'est un objet créé avec le nouveau Vue. Toutes les propriétés et méthodes de l'instance Vue sont accessibles via l'instance, et divers comportements de Vue peuvent également être contrôlés via les méthodes de cycle de vie de l'instance Vue.
• Composant : Il s'agit d'un module indépendant dans Vue qui peut nous aider à diviser le code en parties plus petites et plus faciles à organiser. Par conséquent, les composants sont un concept très clé dans Vue.
• Props : est un objet de propriété du composant Vue, utilisé pour transmettre des données au composant. Props est un flux de données unidirectionnel, c'est-à-dire que le composant parent peut transmettre des données au composant enfant, mais le composant enfant ne peut pas modifier directement la valeur dans les accessoires.
• Événements : peut être utilisé pour surveiller et répondre aux événements DOM. Vue fournit des modificateurs d'événements intégrés pour gérer différents événements.
• Propriétés calculées : utilisées pour calculer des propriétés en fonction des valeurs d'autres variables. Les propriétés calculées sont un concept important dans Vue et sont souvent utilisées pour les calculs de propriétés et les calculs dynamiques au sein des composants.

Après avoir compris ces concepts, nous pouvons commencer à implémenter la fonction de masquage de la zone de saisie. Tout d’abord, nous devons créer une nouvelle instance Vue et ajouter un composant textInput. Ce composant aura besoin d'un accessoire pour contrôler si la zone de saisie est masquée. Voici le code de ce composant :

// textInput.vue
<template>
  <div>
    <input 
      type="text" 
      :value="inputValue"
      @input="handleInput"
      v-if="!hidden"
    />
    <input 
      type="password" 
      :value="inputValue"
      @input="handleInput"
      v-if="hidden"
    />
  </div>
</template>

<script>
  export default {
    name: 'textInput',
    props: {
      hidden: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        inputValue: ''
      }
    },
    methods: {
      handleInput(e) {
        this.inputValue = e.target.value
        this.$emit('input', e.target.value)
      }
    }
  }
</script>

Dans ce composant, nous définissons deux zones de saisie, l'une est une zone de saisie de texte normale et l'autre est une zone de saisie de mot de passe. La seule différence entre elles est leur attribut de type. Les deux zones de saisie sont liées à la variable inputValue, qui est utilisée pour enregistrer la valeur d'entrée. En même temps, ils sont également liés à l'événement d'entrée. Lorsque l'utilisateur entre dans la zone de saisie, nous mettrons à jour la valeur de la variable inputValue et déclencherons un événement d'entrée.

Dans le composant, nous utilisons la directive v-if pour contrôler si la zone de saisie est masquée. Si masqué est faux, la zone de saisie de texte normale s'affiche ; si masqué est vrai, la zone de saisie du mot de passe s'affiche. Les accessoires sont également utilisés ici pour transmettre l'attribut caché au composant.

Ensuite, nous devons utiliser ce composant dans l'instance Vue et contrôler son masquage via notre variable d'entrée personnalisée. Voici le code d'implémentation :

// App.vue
<template>
  <div>
    <textInput 
      v-model="input" 
      :hidden="hideInput"
    />
    <button @click="toggleHideness">
      {{ hideInput ? 'Show' : 'Hide' }} input
    </button>
  </div>
</template>

<script>
  import textInput from './components/textInput.vue'

  export default {
    name: 'app',
    data() {
      return {
        input: '',
        hideInput: false
      }
    },
    components: {
      textInput
    },
    methods: {
      toggleHideness() {
        this.hideInput = !this.hideInput
      }
    }
  }
</script>

Dans cette instance de Vue, nous avons introduit le composant écrit ci-dessus et défini deux variables : input et hideInput. Parmi elles, la variable d'entrée est utilisée pour enregistrer la valeur dans la zone de saisie, et la variable hideInput est utilisée pour contrôler le masquage de la zone de saisie.

Nous rendons le composant dans le modèle et passons la variable hideInput comme paramètre pour contrôler si la zone de saisie est masquée. Nous avons également ajouté un bouton pour basculer la valeur de la variable hideInput afin de choisir d'utiliser ou non un mot de passe dans la zone de saisie.

Enfin, nous devons ajouter une propriété calculée sur l'instance Vue pour contrôler le texte affiché sur le bouton. Voici le code spécifique :

// App.vue
<template>
  <div>
    <textInput 
      v-model="input" 
      :hidden="hideInput"
    />
    <button @click="toggleHideness">
      {{ buttonText }}
    </button>
  </div>
</template>

<script>
  import textInput from './components/textInput.vue'

  export default {
    name: 'app',
    data() {
      return {
        input: '',
        hideInput: false
      }
    },
    components: {
      textInput
    },
    computed: {
      buttonText() {
        return this.hideInput ? 'Show' : 'Hide' + ' input'
      }
    },
    methods: {
      toggleHideness() {
        this.hideInput = !this.hideInput
      }
    }
  }
</script>

Ici, nous ajoutons un attribut calculé buttonText pour déterminer le texte affiché sur le bouton en fonction de la valeur de hideInput. De cette façon, lorsque hideInput est faux, le texte du bouton est "Masquer l'entrée", et lorsque hideInput est vrai, le texte du bouton est "Afficher l'entrée".

Avec le code ci-dessus, nous pouvons facilement implémenter la fonction de masquage de la zone de saisie via Vue. Pour résumer, pour masquer la zone de saisie dans Vue, vous devez définir un composant qui contient deux zones de saisie, transmettre les informations indiquant s'il faut le masquer via des accessoires, et également ajouter des propriétés calculées pour contrôler le texte affiché sur le bouton du zone de saisie cachée.

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!