vue input失去焦点事件onblur

### 如何在 Vue 中使用 Input 的 OnBlur 失去焦点事件 #### 使用 `v-on` 绑定 Blur 事件 在 Vue.js 中，可以利用 `v-on` 指令来绑定原生 DOM 事件。对于处理输入框失去焦点的情况，通常会采用 `blur` 或者自定义修饰符的形式。 当 `<input>` 元素失去焦点时，将会触发相应的处理器函数： ```html <template> <div id="app"> <!-- 绑定 blur 事件 --> <input type="text" v-model="message" @blur="handleBlurEvent"/> <p>Message is: {{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } }, methods: { handleBlurEvent(event) { console.log('Input has lost focus', event.target.value); // 可在此处执行其他逻辑操作 } } } </script> ``` 此方法允许开发者监听到输入框失焦的行为并作出响应[^1]。 #### 解决表单输入框不支持 Focus 和 Blur 事件的问题 如果遇到某些情况下无法正常工作的问题，则可能是因为框架版本差异或其他原因造成的兼容性问题。一种解决办法是在组件挂载之后通过 JavaScript 手动添加这些事件监听器: ```javascript mounted () { this.$nextTick(() => { const el = document.querySelector('#special-input') if (el) { el.addEventListener('focus', this.handleFocus) el.addEventListener('blur', this.handleBlur) } }) }, beforeDestroy () { const el = document.querySelector('#special-input') if (el) { el.removeEventListener('focus', this.handleFocus) el.removeEventListener('blur', this.handleBlur) } } ``` 这种方法绕过了潜在的模板解析限制，并确保即使在特殊场景下也能正确注册所需的事件处理器[^2]。 #### 防止 Input 内容丢失 有时，在设置或更新状态变量的同时可能会意外清除掉原始值。为了避免这种情况发生，可以在修改数据前先保存当前值作为临时副本；或者调整业务逻辑使得每次变更都基于最新用户输入而不是重置整个字段的内容[^3]: ```javascript methods: { handleBlurEvent(event){ let currentValue = event.target.value; // 基于currentValue做进一步处理而不影响model绑定的数据源 } } ```