Vue中失去焦点时所触发的事件

Vue中失去焦点时所触发的事件

1-html、失去焦点

<input type="text" onBlur="txtblur()"> <script> function txtblur(event){ 
      //当前元素失去焦点 console.log(123); } </script> 

2-vue2.0、失去焦点

@input 一般用于监听事件，只要输入的值变化了就会触发input

<input :type="type" :value="value" :placeholder="placeholder" :name="name" @input="$emit('input',$event.target.value)" /> 

@click 事件触发事件

<input type="text" @click="clickFn"> 

@blur 是什么？

@blur 是当元素失去焦点时所触发的事件

使用

<template> <div> <input type="text" placeholder="请输入内容" @blur="blur"/> </div> </template> <script> export default { 
    name: "@blur_61", methods:{ 
    blur(){ 
    console.log("blur事件被执行") } } } </script> <style scoped> </style> 

3-vue3.0、失去焦点

结构

<el-input v-model="inputValue" v-bind="$attrs" @blur="handleBlur" @input="handleInput" class="custom-input" > </el-input> 

方法

const handleBlur = () => { 
   } const handleInput = (v) => { 
   } return { 
    ...toRefs(state), handleBlur, handleInput }; 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10709.html