Cara menggunakan v-on:blur untuk memantau acara di luar fokus dalam Vue

Dalam Vue, arahan v-on ialah arahan yang sangat biasa digunakan, digunakan untuk mengikat pendengar acara kepada elemen DOM, termasuk mendengar acara di luar fokus. Dalam artikel ini, kami akan memperincikan cara menggunakan v-on:blur untuk mendengar acara di luar fokus.

Penggunaan asas menggunakan v-on:blur dalam Vue untuk memantau acara di luar fokus adalah seperti berikut:

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

Dalam contoh di atas, kami menggunakan v-on:blur arahan pada elemen input. Ikat kaedah bernama onBlur. Kaedah ini akan dipanggil apabila elemen input kehilangan fokus.

Dalam Vue, anda juga boleh menggunakan kaedah singkatan untuk mengikat peristiwa, seperti yang ditunjukkan di bawah:

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

Kedua-dua kaedah ini adalah setara dan kedua-duanya boleh mengikat pendengar acara nyahfokus.

Berikut ialah pelaksanaan kod terperinci 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>

Dalam kod di atas, kami mengikat acara @blur pada elemen input, yang memanggil kaedah checkUsername. Dalam kaedah checkUsername, kami hanya menentukan sama ada nama pengguna kosong, dan jika ia kosong, mesej ralat dipaparkan.

Melalui contoh ini, kita dapat melihat bahawa menggunakan v-on:blur untuk memantau acara di luar fokus adalah sangat mudah Anda hanya perlu menggunakan arahan v-on:blur pada elemen yang perlu mengikat acara itu. Sudah tentu, anda juga perlu menentukan kaedah yang sepadan dalam komponen Vue untuk mengendalikan acara tersebut. Kaedah ini boleh digunakan bukan sahaja untuk memantau acara di luar fokus, tetapi juga untuk memantau acara lain, seperti acara klik, acara papan kekunci, dsb.

Atas ialah kandungan terperinci Cara menggunakan v-on:blur untuk memantau acara di luar fokus dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!