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"input绑定onblur事件
>
</el-input>
⽅法
const handleBlur=()=>{} const handleInput=(v)=>{}
return{
...toRefs(state),
handleBlur,
handleInput
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。