v-on:blur を使用して Vue で焦点が合っていないイベントを監視する方法

Vue では、v-on 命令は非常に一般的に使用される命令で、焦点外のイベントの監視など、イベント リスナーを DOM 要素にバインドするために使用されます。この記事では、v-on:blur を使用して焦点が合っていないイベントをリッスンする方法を詳しく説明します。

v-on:blur を使用して Vue で焦点が合っていないイベントを監視する基本的な使用法は次のとおりです:

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

上の例では、v-on:blur を使用しました。 input 要素に onBlur という名前のメソッドをバインドする命令を追加します。このメソッドは、入力要素がフォーカスを失ったときに呼び出されます。

Vue では、以下に示すように、略語を使用してイベントをバインドすることもできます。

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

これら 2 つのメソッドは同等であり、どちらもフォーカスの外のイベント リスナーをバインドできます。

以下は、デモの詳細なコード実装です。

<template>
  <div>
    <h2 id="Vue中如何使用v-on-blur监听失焦事件">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>

上記のコードでは、@blur イベントを入力要素にバインドし、checkUsername メソッドを呼び出しました。 checkUsername メソッドでは、ユーザー名が空かどうかを単純に判断し、空の場合はエラー メッセージが表示されます。

この例を通して、v-on:blur を使用して焦点が合っていないイベントを監視することが非常に簡単であることがわかります。必要な要素に対して v-on:blur 命令を使用するだけです。出来事に縛られる。もちろん、イベントを処理するには、Vue コンポーネントで対応するメソッドを定義する必要もあります。この方法は、焦点が合っていないイベントを監視するだけでなく、クリック イベントやキーボード イベントなどの他のイベントを監視するためにも使用できます。

以上がv-on:blur を使用して Vue で焦点が合っていないイベントを監視する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。