Vue使用監聽器模擬用戶名重複驗證

 Vue.js 監聽屬性 watch,我們可以通過 watch 來響應數據的變化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  用戶名 : <input id="firstname" type="text" v-model.lazy="uname" >{{tip}} <!--.lazy相當於失去焦點事件-->

</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
         uname:'',
            tip:''
        },
        methods:{
          checkName:function (name) {
              var that = this
    setTimeout(function () {//設置演示,模擬後臺傳送數據

        if(name=='admin'){
           that.tip='用戶名存在'
          }else{
            that.tip='用戶名可以使用 '
     }
    
    } ,200)

          }
        },
        watch:{
            uname:function (val) {
                this.checkName(val);
                this.tip="正在驗證。。"
            }

        }


    })
</script>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章