需求：
表單輸入框中輸入用戶名，失去焦點時驗證用戶名是否存在，如果已經存在，提示重新輸入，如果不存在提示用戶名可以使用。
實現分析：
- 通過v-model實現數據的綁定
- 需要提供提示信息
- 需要偵聽器監聽輸入信息的變化
- 需要修改觸發事件
實現驗證用戶名是否可用的效果：
實現代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>驗證用戶名是否可用</title> 8 </head> 9 <script src="./js/vue.js"></script> 10 11 <body> 12 <div id="app"> 13 用戶名：<input type="text" v-model.lazy='uname'> 14 <span>{{tip}}</span> 15 </div> 16 <script> 17 18 var vm = new Vue({ 19 el: '#app', 20 data: { 21 uname: '', 22 tip: '' 23 }, 24 methods: { 25 checkName: function(uname) { 26 var that = this; 27 //調用接口，但是可以使用定時任務的方式模擬接口的調用 28 setTimeout(function() { 29 //模擬接口調用 30 if (uname == 'admin') { 31 that.tip = '用戶名已存在，請重新輸入' 32 } else { 33 that.tip = '恭喜你輸入的用戶名可以使用' 34 } 35 36 }, 2000) 37 } 38 }, 39 watch: { 40 uname: function(val) { 41 //調用后台接口驗證用戶名的合法性 42 this.checkName(val); 43 //修改提示信息 44 this.tip = '正在驗證用戶名...' 45 } 46 } 47 48 }) 49 </script> 50 51 </body> 52 53 </html>
偵聽器實現的步驟：
1、使用偵聽器監聽用戶名的變化
2、調用后台接口進行驗證
3、使用驗證的結果調整提示信息
