vue实现input失去焦点
实现方法
在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>注意事项
- 若需获取事件对象，可通过
$event传递（如内联事件处理）。 - 移动端可能需要额外处理
touch事件来模拟失焦效果。 - 使用修饰符
.prevent可以阻止默认行为（如@blur.prevent）。
