vue中的监视属性watch

最新推荐文章于 2023-07-09 19:36:15 发布

洛洛大芳

最新推荐文章于 2023-07-09 19:36:15 发布

阅读量189

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/DYFNB/article/details/119547118

版权

vue学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的—>官方说明

watch侦听器属性理解起来也不难的,就是用来监视属性的变化,变化之后要发什么动作全凭你自己决定,直接写在watch的方法里面就可以了,官方文档中也有说明侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="vuediv">
        针对员工号做监视：<input type="text" v-model="emp.empno" />当前的员工号为:{{emp.empno}}<br/>
		针对员工姓名做监视：<input type="text" v-model="emp.ename" />当前的员工号为:{{emp.ename}}<br>
		地址做监视：<input type="text" v-model="emp.loc.l1" />当前的员工号为:{{emp.loc.l1}}
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#vuediv",
        data() {
            return {
                emp:{
                    empno:7788,
                    ename:"Scot",
                    job:"java",
                    sal:9999.00,
                    loc:{
                        l1:"上海",
                        l2:"北京"
                    }
                },
                userName:""
            }
        },
        watch:{
            'emp.empno':function(newVal,oldVal){
              console.log("新的编号为:"+newVal);
            },
            userName:function(){
             
            },
            emp:{
                deep:true,  //该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
                handler:function(newVal,oldVal){
                   console.log("深度监视:"+newVal);
                }
            },
            'emp.ename':{
                immediate:true,
                handler:function(newVal,oldVal){
                  console.log("监视姓名，属性未发生任何变华时，先执行一次此代码",newVal)
                }
            }
        }
    })
    console.log(vm);
</script>
</html>

洛洛大芳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的监视属性watch

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的—>官方说明watch侦听器属性理解起来也不难的,就是用来监视属性的变化,变化之后要发什么动作全凭你自己决定,直接写在watch的方法里面就可以了,官方文档中也有说明侦听器<!DOCTYPE html><html lang="en"><head&g.
复制链接

扫一扫