<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 1.通过v-model实现数据的绑定 2.需要提供提示信息 3.需要监听输入信息变化 4.需要修改触发的事件 --> <div id="app"> <span>用户名：</span> <span><input type="text" v-model.lazy='uname'></span> <span>{{tip}}</span> </div> </body> <script src="js/vue.js"></script> <script> //监听器 // 1.采用监听器监听用户名变化 // 2.调用后台接口进行啊验证 // 3.根据验证结果调整提示信息 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 = '正在验证' } } }); </script> </html>