该博客演示了如何在Vue中利用监听器（watch）实现数据变化时的实时校验。通过监听username属性，当用户在输入框输入值并移开后，调用checkName方法进行数据校验。如果输入的值为'admin'或'tom'，则显示“数据已存在”；否则提示“数据可以使用”。这个示例展示了Vue在业务处理中如何进行异步操作或Ajax请求前的数据验证。
业务需求：
- 当属性的数据发生变化时，则通过监听器实现对数据的监控，从而实现数据的操作。
使用场景：
- 一般用于业务处理（异步操作 或 Ajax请求）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用监听器来测试数据是否可用</title>
</head>
<body>
<div id="app">
<!--
需求:
要求用户输入username的用户名,之后与服务器进行校验
如果已经存在给用户提示. 如果不存在 则提示用户可用.
-->
用户名: <input type="text" v-model.lazy="username"/>{{msg}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
//需要校验的数据
username: '',
//校验的结果
msg: ''
},
methods: {
checkName(val){
//===严格意义的数据校验 新版本提倡这么写 校验数值 还校验类型
if(val === 'admin'){
this.msg = "数据已存在"
}
else if(val === 'tom'){
this.msg = "数据已存在"
}else{
this.msg = "数据可以使用"
}
}
},
//watch: 监听器
//key 被监听的属性的名称 方法的结构
//value 当监听器生效时 value就是属性的数据
watch: {
//定义属性的监听器
username(val){
this.checkName(val)
}
}
})
</script>
</body>
</html>
运行步骤
- 在
input输入框中输入数据。 - 将鼠标移开输入框后
watch调用checkName方法，同时将value传入到相应方法中对数据进行校验。 - 将校验的结果交给
msg属性，利用插值表达式将校验结果及时的返回。
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
