Comment utiliser v-on:input pour surveiller les événements d'entrée de la zone de saisie dans Vue

Vue est un framework JavaScript populaire qui rend le développement Web plus efficace et plus simple. Parmi eux, l'utilisation de v-on:input pour surveiller les événements d'entrée de la zone de saisie est une exigence courante. Cet article présentera en détail comment utiliser v-on:input pour surveiller les événements d'entrée de la zone de saisie dans Vue.

1. Commande v-on:input

La commande v-on:input est une commande dans Vue qui est utilisée pour surveiller les événements d'entrée dans la zone de saisie. Elle peut être implémentée en surveillant les événements d'entrée d'éléments tels que l'entrée. , zone de texte et contenteditable.

L'utilisation de la directive v-on:input est très simple. Il vous suffit de lier l'attribut v-on:input à l'élément qui doit être surveillé, puis de définir la méthode correspondante dans l'instance Vue.

Par exemple, dans le code ci-dessous, nous définissons une zone de saisie et un élément div qui affiche le contenu d'entrée. Utilisez la directive v-on:input sur l'élément d'entrée pour lier une méthode qui sera appelée lorsque le contenu est saisi dans la zone de saisie et mettre à jour le contenu d'entrée avec la variable de message dans les données. Dans l'élément div, nous utilisons l'interpolation {{}} pour restituer la variable de message dans les données.

<div id="app">
  <input v-on:input="updateMessage">
  <div>{{message}}</div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: ''
    },
    methods: {
      updateMessage: function (event) {
        this.message = event.target.value
      }
    }
  })
</script>

2. Utilisez la directive v-model pour simplifier le code

Bien que la directive v-on:input puisse être utilisée pour surveiller les événements d'entrée dans la zone de saisie, dans le développement réel, nous utilisons généralement la directive v-model pour simplifier le code.

La directive v-model équivaut à lier une directive v-on:input et un attribut value en même temps. Par conséquent, nous pouvons implémenter l'exemple de code ci-dessus en utilisant la directive v-model sur l'élément d'entrée.

<div id="app">
  <input v-model="message">
  <div>{{message}}</div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: ''
    }
  })
</script>

Après avoir utilisé la directive v-model, vous n'avez plus besoin de définir la méthode updateMessage dans les méthodes pour mettre à jour les données. Vue mettra automatiquement à jour la valeur dans la zone de saisie avec la variable de message dans les données.

3. Surveiller d'autres événements d'entrée

En plus des événements d'entrée, Vue fournit également d'autres événements d'entrée à surveiller, tels que les changements, les touches enfoncées, les touches enfoncées, etc. Nous pouvons transmettre le nom de l'événement correspondant lors de l'utilisation de la directive v-on:input pour spécifier l'événement à surveiller.

Par exemple, dans le code ci-dessous, nous écoutons l'événement de changement d'un élément textarea, et l'événement sera déclenché lorsque l'utilisateur terminera la saisie et quittera l'élément. Dans la méthode d'instance Vue, nous déterminons si le contenu saisi par l'utilisateur répond à nos exigences en fonction de la valeur représentée par event.target.value.

<div id="app">
  <textarea v-on:change="checkInput"></textarea>
</div>

<script>
  var app = new Vue({
    el: '#app',
    methods: {
      checkInput: function (event) {
        if (event.target.value === '') {
          alert('输入内容不能为空！')
        } else {
          alert('输入内容为：' + event.target.value)
        }
      }
    }
  })
</script>

4. Résumé

L'utilisation de la directive v-on:input dans Vue peut facilement implémenter la fonction de surveillance de l'événement d'entrée de la zone de saisie. En même temps, nous pouvons également utiliser la directive v-model pour simplifier le. code. En plus des événements d'entrée, Vue fournit également une variété d'événements d'entrée pour surveiller les entrées utilisateur, qui peuvent être sélectionnés en fonction des besoins spécifiques. Une fois que vous maîtriserez ces compétences, je pense que vous serez en mesure d'effectuer le travail de développement de Vue plus efficacement.

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!