<!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>