Comment utiliser la directive v-on pour gérer les événements d'entrée de formulaire dans Vue

Comment gérer les événements de saisie de formulaire à l'aide de la directive v-on dans Vue

Vue est un framework JavaScript populaire pour créer des interfaces utilisateur. Dans Vue, nous pouvons utiliser la directive v-on pour surveiller les événements de saisie de formulaire, tels que les clics sur les boutons, la saisie au clavier, etc. Cet article expliquera comment utiliser la directive v-on pour gérer les événements d'entrée de formulaire dans Vue et fournira des exemples de code spécifiques.

1. Écouter les événements de clic de bouton

Tout d'abord, nous verrons comment utiliser la directive v-on pour écouter les événements de clic de bouton. Disons que nous avons un bouton qui déclenche une méthode lorsqu'on clique dessus.

Le code du modèle HTML est le suivant :

<div id="app">
  <button v-on:click="handleClick">点击我</button>
</div>

Le code de l'instance Vue est le suivant :

new Vue({
  el: '#app',
  methods: {
    handleClick: function() {
      alert('按钮被点击了！');
    }
  }
});

Dans le code ci-dessus, nous utilisons la directive v-on pour lier l'événement click du bouton, suivi du nom de la méthode. nous voulons déclencher.

2. Écouter les événements de saisie dans la zone de texte

Ensuite, nous présenterons comment utiliser l'instruction v-on pour écouter les événements de saisie dans la zone de texte. Supposons que nous ayons une zone de texte et que lorsque l'utilisateur tape dans la zone de texte, une méthode est déclenchée.

Le code du modèle HTML est le suivant :

<div id="app">
  <input v-on:input="handleChange" type="text" placeholder="请输入内容">
</div>

Le code de l'instance Vue est le suivant :

new Vue({
  el: '#app',
  methods: {
    handleChange: function(event) {
      console.log(event.target.value);
    }
  }
});

Dans le code ci-dessus, nous utilisons la directive v-on pour lier l'événement d'entrée de la zone de texte, suivi du nom du méthode que nous voulons déclencher. Et, dans la méthode, nous pouvons obtenir la valeur saisie par l'utilisateur via event.target.value.

3. Écouter les événements du clavier

Enfin, nous présenterons comment utiliser la commande v-on pour écouter les événements du clavier. Supposons que nous ayons une zone de saisie et que lorsque l'utilisateur appuie sur la touche Entrée, une méthode sera déclenchée.

Le code du modèle HTML est le suivant :

<div id="app">
  <input v-on:keyup.enter="handleEnter" type="text" placeholder="按下回车键">
</div>

Le code de l'instance Vue est le suivant :

new Vue({
  el: '#app',
  methods: {
    handleEnter: function() {
      alert('回车键被按下了！');
    }
  }
});

Dans le code ci-dessus, nous utilisons la directive v-on pour lier l'événement keyup du clavier et spécifions la valeur de la clé surveillée via le modificateur .enter : touche Entrée (le code clé est 13). Ceci est suivi du nom de la méthode à déclencher.

Résumé

Grâce aux exemples ci-dessus, nous avons appris à utiliser la directive v-on pour gérer les événements d'entrée de formulaire dans Vue. Nous pouvons utiliser v-on:click pour écouter les événements de clic sur le bouton, v-on:input pour écouter les événements de saisie dans la zone de texte et v-on:keyup.enter pour écouter les événements de saisie au clavier. La directive v-on peut être utilisée pour gérer facilement les événements de saisie de formulaire.

Notez que dans Vue, v-on peut être abrégé en @, par exemple, @click représente v-on:click, @input représente v-on:input et @keyup.enter représente v-on:keyup.enter . Nous pouvons choisir la méthode d’écriture à utiliser en fonction de vos préférences personnelles.

J'espère que cet article pourra vous aider à utiliser l'instruction v-on pour gérer les événements de saisie de formulaire dans Vue. Si vous avez des questions, veuillez laisser un message pour en discuter.

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!