vue ---- 监听器

最新推荐文章于 2023-07-15 15:56:30 发布

悠闲的线程池

最新推荐文章于 2023-07-15 15:56:30 发布

阅读量125

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44235759/article/details/121136685

版权

② vue 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

watch 监听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

 const vm = new Vue({
     el: '#app',
     data: {
         username: ''
     },
     //监听器需要定义在watch节点下
     watch: {
		//监听 username 值的变化，要监听哪个值，就做为方法名
		username(newVal,oldVal){
			console.log(newVal,oldVal)
		}
	}

案例
应用场景：登录的用户校验

数据绑定使用 v-model
方法格式的监听器使用
对象格式监听器使用
发送Ajax请求

<body>
    <div id="app">
        <input type="text" v-model="username">
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script src="./lib/jquery-v3.6.0.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                username: 'admin'
            },
            watch: {
                /*username(newVal,oldVal){
                    console.log("新值： " + newVal, "旧值： " + oldVal)
                }*/
				//建议定义成方法
                /*username(newVal){
                    if(newVal === '') return;

                    $.get('https://www.escook.cn/api/finduser/' + newVal,function(result){
                        console.log(result);
                    })
                }*/

                username: {
                    handler(newVal) {
                    	//判空
                        if (newVal === '') return;

                        $.get('https://www.escook.cn/api/finduser/' + newVal, function(result) {
                            console.log(result);
                        })
                    },
                    //默认为false,不自动触发
                    immediate: true
                }
            }
        });
    </script>
</body>

案例
如果监听的是一个对象，对象中的属性的变化不会被监听到，处理方法如下

<body>
    <div id="app">
        <input type="text" v-model="info.username">
    </div>



    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                info: {
                    username: ''
                }
            },
            watch: {
            	//使用对象格式定义方式，打开deep的值，默认为false
                // info: {
                //     handler(newVal) {
                //         console.log(newVal);
                //     },
                //     deep: true
                // }
				
				//单独监听对象中的某个属性的变化
                'info.username': {
                    handler(newVal){
                        console.log(newVal);
                    }
                }
            }
        });
    </script>
</body>

悠闲的线程池

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue ---- 监听器

watch 监听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。 const vm = new Vue({ el: '#app', data: { username: '' }, //监听器需要定义在watch节点下 watch: { //监听 username 值的变化，要监听哪个值，就做为方法名 username(newVal,oldVal){ console.log(newVal,oldVal) }
复制链接

扫一扫