2024年06月21日 建站教程
vue项目中如何利用v-on:blur监听失焦事件，下面web建站小编给大家简单介绍一下！
具体语法如下：
<template>
<div>
<label for="username">用户名：</label>
<input type="text" id="username" v-model="username" @blur="checkUsername">
<div v-show="showErrorMsg">{{errorMsg}}</div>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
showErrorMsg: false,
errorMsg: ''
}
},
methods: {
checkUsername() {
// 这里我们简单判断用户名是否为空
if (this.username === '') {
this.showErrorMsg = true
this.errorMsg = '用户名不能为空'
} else {
this.showErrorMsg = false
}
}
}
}
</script>
本文链接：http://so.lmcjl.com/news/6989/