1 通过v-model实现数据绑定
2 需要提供验证信息
3 需要侦听器监听输入信息的变化
4 通过v-model.lazy监听事件
代码如下
<div id="app">
<span>用户名:</span>
<span>
<input type="text" v-model.lazy='uname'>
</span>
<span>{
{tip}}</span>
</div>
var vm = new Vue({
el: '#app',
data: {
uname: '',
tip: ''
},
methods: {
checkName: function (uname) {
//调用接口 但是可以使用定时任务的方式模拟接口调用
var that = this;
setTimeout(function () {
//模拟接口调用
if (uname == 'admin') {
that.tip = '用户名已经存在,请更换'
} else {
that.tip = '用户名可以使用'
}
}, 2000)
}
},
watch: {
uname: function (val) {
//调用后台接口验证用户名的合法性
this.checkName(val);
//修改验证信息
this.tip = '正在验证。。。'
}
},
});