在vue中@blur 是当元素失去焦点时所触发的事件
例子:
在添加用户的时候,在输入用户名的时候要保证其用户名是唯一的,所有就要输入完用户名的时候,向后端发起请求,后端去查看数据库中是否存在该用户名,如果存在就要提醒用户该用户名已经存在,这个时候就可以用到blur来实现输入完用户名就开始校验。

<tr>
	<td>用户名</td>
	<td>
		<input v-model="user.uname"  @blur="checkNum()"/> 
	</td>
</tr>
methods:{
	checkNum(){
		let uname = this.user.uname;
		let url = this.$myurl+'/UserController?act=exist';
		let params = this.$qs.stringify({uname:uname})
		console.log("params=",params);
		this.$axios.post(url,params)
			.then((response)=>{
				let s = response.data;
				console.log(s);
				if(s=='exist'){
					this.msg = '该用户名已存在,请修改用户名!'
				}else {
					this.msg='';
				}
			})
			.catch((error)=>{
				console.log("error",error);
			});	
	},
}

在这里插入图片描述
当输入完用户名鼠标离开输入框的时候,就会触发blur事件,进而去校验用户名是否存在。

Logo

前往低代码交流专区

更多推荐