Vue使用监听器模拟用户名重复验证

最新推荐文章于 2023-06-09 19:07:01 发布

Ysdo

最新推荐文章于 2023-06-09 19:07:01 发布

阅读量727

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_42183409/article/details/106322487

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

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>