Comment utiliser v-on:blur pour surveiller les événements flous dans Vue

Dans Vue, l'instruction v-on est une instruction très couramment utilisée, utilisée pour lier les écouteurs d'événements aux éléments DOM, y compris l'écoute des événements flous. Dans cet article, nous détaillerons comment utiliser v-on:blur pour écouter les événements flous.

L'utilisation de base de l'utilisation de v-on:blur pour surveiller les événements flous dans Vue est la suivante :

<template>
  <div>
    <input type="text" v-on:blur="onBlur">
  </div>
</template>

Dans l'exemple ci-dessus, nous avons utilisé la directive v-on:blur sur l'élément d'entrée pour lier un méthode nommée onBlur . Cette méthode sera appelée lorsque l’élément d’entrée perd le focus.

Dans Vue, vous pouvez également utiliser la méthode d'abréviation pour lier des événements, comme indiqué ci-dessous :

<template>
  <div>
    <input type="text" @blur="onBlur">
  </div>
</template>

Ces deux méthodes sont équivalentes et toutes deux peuvent lier des écouteurs d'événements flous.

Ce qui suit est l'implémentation détaillée du code de la démo.

<template>
  <div>
    <h2>Vue中如何使用v-on:blur监听失焦事件</h2>
    <br>
    <label for="username">用户名：</label>
    <input type="text" id="username" v-model="username" @blur="checkUsername">
    <div v-show="showErrorMsg">{{errorMsg}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      showErrorMsg: false,
      errorMsg: ''
    }
  },
  methods: {
    checkUsername() {
      // 这里我们简单判断用户名是否为空
      if (this.username === '') {
        this.showErrorMsg = true
        this.errorMsg = '用户名不能为空'
      } else {
        this.showErrorMsg = false
      }
    }
  }
}
</script>

Dans le code ci-dessus, nous lions un événement @blur à un élément d'entrée, qui appelle la méthode checkUsername. Dans la méthode checkUsername, nous déterminons simplement si le nom d'utilisateur est vide, et s'il est vide, un message d'erreur s'affiche.

À travers cet exemple, nous pouvons voir qu'utiliser v-on:blur pour surveiller les événements flous est très simple. Il vous suffit d'utiliser l'instruction v-on:blur sur l'élément qui doit être lié au. événement. Bien entendu, vous devez également définir la méthode correspondante dans le composant Vue pour gérer l'événement. Cette méthode peut être utilisée non seulement pour surveiller les événements flous, mais également pour surveiller d'autres événements, tels que les événements de clic, les événements de clavier, etc.

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!