<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="杨欣">

    <title></title>

    <style>

        html,

        body {

            margin: 0;

            padding: 0

        }

    </style>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>

<body>

    <div id="app">{{obj.name}}</div>

    <script>

        let app = new Vue({

            el: "#app",

            data: {

                obj: {

                    name: 'yx'

                }

            },

            computed: {

                //1.把要监听的属性作为计算属性

                // name() {

                //     return this.obj.name

                // }

            },

            watch: {

                // name(newVal, oldVal) {

                //     console.log(newVal, oldVal)

                // }

                // 2.监听obj，加上deep

                obj: {

                    handler(newVal, oldVal) {

                        console.log(newVal, oldVal)

                    },

                    deep: true

                }

            },

        })

    </script>

</body>

</html>

　　

watch监听对象的属性的更多相关文章

  1. vue--》如何使用wacth监听对象的属性变化？

    在开发过程中,我们经常需要监听watch监听一个对象的变化,但是如何来实现     监听对象中属性的变化呢? 先回顾一下如何监听整个对象的变化,使用watch就行了 export default { ...

  2. Listener 监听对象的属性变化

    Listener用于监听Session.context.Request的属性变化,接口名称格式为xxxAttributeListener,包括HttpSessionAttributeListener. ...

  3. Object.defineProperty 监听对象属性变化

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  4. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

  5. AngularJS - Watch 监听对象

    <body> <div ng-app="myApp"> <div ng-controller="firstController"& ...

  6. 在vue中使用watch监听对象或数组

    最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...

  7. vue 监听对象里的特定数据

    vue  监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...

  8. 监听WPF依赖属性

    原文:监听WPF依赖属性 当我们使用依赖属性的时候,有时需要监听它的变化,这在写自定义控件的时候十分有用, 下面介绍一种简单的方法.   如下使用DependencyPropertyDescripto ...

  9. Proxy监听对象的数据变化，处理绑定数据很有用

    Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作.一下子让我们对一个对象有了很强的追踪能力,同时在数据绑定方面也很有用处. }; //interceptor 拦截 var ...

随机推荐

  1. 洛谷 P2018 消息传递

    题目分析 贪心+树形DP 本来还以为要大费周折地换根,然后发现 \(n\) 很小,可以直接 \(O(n^2\log n)\) 枚举. 枚举每个节点作为根,用 \(f_x\) 表示走完以 \(x\) 为 ...

  2. java 基础知识(java web 方面的)

    1.java面向对象的基本特征:封装性,多态性,继承性. 2.Java的泛型:iterator接口主要有hasnext()方法,next()方法,remove()方法:collection接口继承了i ...

  3. ceph erasure默认的min_size分析

    引言 最近接触了两个集群都使用到了erasure code,一个集群是hammer版本的,一个环境是luminous版本的,两个环境都出现了incomplete,触发的原因有类似的地方,都是有osd的 ...

  4. Python面试题_初级版

    1.如何在一个函数内部修改全局变量 a=5 def fn(): a=4 fn() print(a) # 5 #在一个函数内部修改全局变量 a=5 def fn(): global a a=4 fn() ...

  5. Nginx实例

    一.反向代理 反向代理实例一 1.实现效果 打开浏览器,在浏览器地址栏输入地址www.pluto.com,跳转到 liunx 系统 tomcat 主页面中 2.准备工作 [1].安装tomcat [r ...

  6. 面试大厂必看！就凭借这份Java多线程和并发面试题，我拿到了字节和美团的offer！

    最近好多粉丝私信我说在最近的面试中老是被问到多线程和高并发的问题,又对这一块不是很了解,很简单就被面试官给问倒了,被问倒的后果当然就是被刷下去了,因为粉丝要求,我最近也是花了两天时间 给大家整理了这一 ...

  7. 如何合理利用iMindMap中的模板创建思维导图

    思维导图的制作并不是一项简单的工作,尤其是对许多工作或学习有特殊要求的朋友而言,当我们需要应对不同场景制作不同的思维导图时,总不能都靠自己从头制作,这样难度比较大也比较耗时.而iMindMap(win ...

  8. 用FL Studio来给电子音乐混音的方法

    FL Studio也算是音乐人用的比较多的编曲.混音软件了,FL Studio的一大的特色就是电子音乐的制作.尤其是对混音的操作,混音是电音制作过程中一个非常重要的环节,非常重要. 混音是什么?混音的 ...

  9. kube-flannel.yml 文件

    ---kind: ClusterRoleapiVersion: rbac.authorization.k8s.io/v1beta1metadata: name: flannelrules: - api ...

  10. 【？？？】今天上午的考试题——区间dp和字符串／线性筛的综合应用

    T3还没有打出来,就先放两道. ---------------------------------------------------------- T1:密码破译 温温手下的情报部门截获了一封加密信 ...