当前位置：首页 > VUE

vue实现input失去焦点

2026-01-22 04:23:17VUE

实现方法

在Vue中实现input失去焦点（blur）事件，可以通过v-on指令或@简写绑定blur事件。以下是具体实现方式：

模板中绑定事件

<template>
  <input 
    v-model="inputValue" 
    @blur="handleBlur" 
    placeholder="输入后失去焦点触发"
  />
</template>

脚本中定义方法

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleBlur(event) {
      console.log('输入框失去焦点', event.target.value);
      // 执行其他逻辑
    }
  }
}
</script>

结合校验的场景

若需要在失去焦点时进行表单校验，可以结合计算属性或校验库（如VeeValidate）实现：

<template>
  <input 
    v-model="email" 
    @blur="validateEmail" 
    placeholder="输入邮箱"
  />
  <p v-if="error">{{ error }}</p>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      error: ''
    }
  },
  methods: {
    validateEmail() {
      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      this.error = regex.test(this.email) ? '' : '邮箱格式错误';
    }
  }
}
</script>

动态绑定多个输入框

通过传递参数处理多个输入框的失焦事件：

<template>
  <input 
    v-for="(item, index) in inputs" 
    :key="index" 
    v-model="item.value" 
    @blur="(e) => handleBlur(index, e)" 
  />
</template>

<script>
export default {
  data() {
    return {
      inputs: [
        { value: '', type: 'username' },
        { value: '', type: 'password' }
      ]
    }
  },
  methods: {
    handleBlur(index, event) {
      console.log(`第${index}个输入框失去焦点`, this.inputs[index].value);
    }
  }
}
</script>