本文實例為大家分享了vue驗證用戶名是否可用的具體代碼，供大家參考，具體內容如下

1、通過v-model實現數據綁定2、需要提供提示信息3、需要偵聽器監聽輸入信息的變化4、需要修改觸發的事件

進一步調整就是

1、采用偵聽器監聽用戶名的變化2、如果用戶名發生變化（調用后臺接口進行驗證）3、根據驗證的結果調整提示信息

基本布局

<div id='app'> <span>用戶名:</span> <span> <input type='text' v-model.lazy='uname'> </span> <span> {{tip}} </span></div>

通過監聽器實現具體功能

<script type='text/javascript' src='http://www.aoyou183.cn/js/vue.js'></script> <script type='text/javascript'> /* 偵聽器 采用偵聽器監聽用戶名的變化 如果用戶名發生變化（調用后臺接口進行驗證） 根據驗證的結果調整提示信息 */ 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 = ’用戶名可以使用’ } }, 1000) } }, watch: { uname: function (val) { // 調用后臺接口驗證用戶名的合法性 this.checkName(val); this.tip = ’正在驗證...’ } }, });</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。