监听器

2021-04-23 12:36:52 作者：互联网

基本用法

<body>
    <!-- 
     应用场景：数据变化时执行导步或开销较大的操作
     -->
    <div id="app">
        名：<input type="text" v-model="ming">
        姓：<input type="text" v-model="xing">
        <div>{{name}}</div> 输入框输入值显示也发生变化
        <div>{{name2}}</div>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
    var vm=new Vue({
            el:'#app',
            data:{
                ming:'',
                xing:'',
                name:''
            },
            watch:{//侦听组件实现
                ming:function(e){//参数表示变化之后的值
                    this.name=this.xing+''+e
                },
                xing:function(e){
                    this.name=e+''+this.ming
                }
            },
            computed:{//计算属性实现
                name2:function(){
                    return this.xing+''+this.ming
                }
            }
        });
    </script>
</body>

监听用户名是否被注册

<body>
    <!--
    1.v-model实现数据绑定
    2.提示信息
    3.侦听器监听输入信息
        采用侦听器监听用户名的变化
        调用后台接口进行验证
        根据验证结果调整提示信息
    4.失去焦点触发事件
      -->
    <div id="app">
        用户名:<input type="text" v-model.lazy="name">
        <!-- 调用name函数，失去焦点的时候触发事件 -->
        <span>{{tip}}</span>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
    var vm=new Vue({
            el:'#app',
            data:{
                name:'',
                tip:''
            },
            methods:{
                checkname:function(name){
                    //调用接口，但是可以使用定时任务的方式模拟接口调用
                    var that = this
                    setTimeout(function(){
                        if(name=='admin'){
                            that.tip='用户名已经存在，请更换一个'
                        }else{
                            that.tip='用户名可以使用'
                        }
                    },2000)
                }
            },
            watch:{
                name:function(a){
                    //调用后台接口验证
                    this.checkname(a)
                    //修改提示信息
                    this.tip='正在验证...'
                }
            }
        });
    </script>
</body>

标签：function,用户名,xing,name,tip,ming,监听器
来源： https://www.cnblogs.com/black-eyes/p/14693223.html