So verwenden Sie v-on:blur, um unscharfe Ereignisse in Vue zu überwachen

In Vue ist die v-on-Anweisung eine sehr häufig verwendete Anweisung, mit der Ereignis-Listener an DOM-Elemente gebunden werden, einschließlich der Überwachung auf Ereignisse außerhalb des Fokus. In diesem Artikel erfahren Sie, wie Sie mit v-on:blur auf unscharfe Ereignisse achten.

Die grundlegende Verwendung von v-on:blur zum Überwachen von unscharfen Ereignissen in Vue ist wie folgt:

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

Im obigen Beispiel haben wir die v-on:blur-Direktive für das Eingabeelement verwendet, um a zu binden Methode namens onBlur . Diese Methode wird aufgerufen, wenn das Eingabeelement den Fokus verliert.

In Vue können Sie auch die Abkürzungsmethode zum Binden von Ereignissen verwenden, wie unten gezeigt:

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

Diese beiden Methoden sind gleichwertig und beide können unscharfe Ereignis-Listener binden.

Das Folgende ist die detaillierte Code-Implementierung der Demo.

<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>

Im obigen Code binden wir ein @blur-Ereignis an ein Eingabeelement, das die Methode checkUsername aufruft. In der Methode checkUsername ermitteln wir einfach, ob der Benutzername leer ist, und wenn er leer ist, wird eine Fehlermeldung angezeigt.

Anhand dieses Beispiels können wir sehen, dass die Verwendung von v-on:blur zum Überwachen von unscharfen Ereignissen sehr einfach ist. Sie müssen nur die v-on:blur-Anweisung für das Element verwenden, das an gebunden werden muss Ereignis. Natürlich müssen Sie auch die entsprechende Methode in der Vue-Komponente definieren, um das Ereignis zu verarbeiten. Diese Methode kann nicht nur zum Überwachen von unscharfen Ereignissen verwendet werden, sondern auch zum Überwachen anderer Ereignisse, wie z. B. Klickereignisse, Tastaturereignisse usw.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie v-on:blur, um unscharfe Ereignisse in Vue zu überwachen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!