新建 userinfo = { name: "小明",  age: "18", }

  vue中watch监听name的方法

  1. 可以结合计算属性的方法实现

{
......
watch: {
nm () {
console.log(this.nm)
}
},
computed: {
nm () { return this.userinfo.name }
}
......
}

  2. 可以通过配置 deep 为true实现

// 监听对象的某个值
{
......
watch: {
'userinfo.name' () {
console.log(this.nm)
}
}
......
} // 直接监听整个属性,消耗大
{
......
watch: {
userinfo () {
handler () {
console.log(this.nm)
},
deep: true
}
}
......
}

    

Vue之watch监听对象中某个属性的方法的更多相关文章

  1. Vue使用watch监听一个对象中的属性

    问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedSta ...

  2. Vue子组件监听事件中传递参数的方法

    在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...

  3. 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具

    查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...

  4. vue监听数组中某个属性,计算其他属性问题

    今天在项目开发中遇到一个根据数组中某个属性变化同时更新另一个属性变化的问题,刚开始代码如下 this.weekList1=r.data.roomProducts; this.weekList1.map ...

  5. vue利用watch侦听对象具体的属性 ~ 巧用计算属性computed做中间层

    有时候需要侦听某个对象具体的属性,可以按下面案例进行: <template> <div> <input type="text" v-model=&qu ...

  6. vue watch深度监听对象,实现数据联动

    当对象内的某一个元素发生变化,判断对象另一元素,并进行赋值 <template> <input type="text" v-model="a.a1.a1 ...

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

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

  8. 关于Oracle本地连接出现与监听有关的问题的解决方法探讨

    关于Oracle本地连接出现与监听有关的问题的解决方法探讨 监听的作用: 用于应用桌面即用户与数据库服务器建立连接的媒介,客户端发送连接请求,监听识别请求并建立客户端与服务器的连接后,监听的使命并完成 ...

  9. JS高级---拷贝继承:把一个对象中的属性或者方法直接复制到另一个对象中

    拷贝继承:把一个对象中的属性或者方法直接复制到另一个对象中 浅拷贝 function Person() { } Person.prototype.age = 10; Person.prototype. ...

随机推荐

  1. 【LeetCode】139. Word Break 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  2. 1076 - Get the Containers

    1076 - Get the Containers    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 ...

  3. 实战!Spring Boot 整合 阿里开源中间件 Canal 实现数据增量同步!

    大家好,我是不才陈某~ 数据同步一直是一个令人头疼的问题.在业务量小,场景不多,数据量不大的情况下我们可能会选择在项目中直接写一些定时任务手动处理数据,例如从多个表将数据查出来,再汇总处理,再插入到相 ...

  4. PLSQL到期处理

    一.输入指令"regedit"打开注册表 二.指令输入完毕后,按回车键,会进入这个界面. 三.注册表里按HKEY_CURRENT_USER\Software\Allround Au ...

  5. css怎么实现雪人

    冬天来了,怎么能少的了雪人呢,不管是现实中还是程序员的代码中统统都的安排上,那就一次安排几个雪人兄弟,咱们先看效果图: 有喜欢的就赶紧cv拿走吧!!! 其详细代码如下: 图1 html部分: < ...

  6. linux系统安装java

    1.下载Java压缩包 *.gz 2.解压 3.修改Linux配置文件,配置Java环境变量 4.使用命令source /etc/profile让修改生效 转载 https://www.cnblogs ...

  7. Java中对象的内存分配机制

    一.内存划分 Java把内存划分为两种,一种是栈内存,另一种是堆内存. 1.栈内存 在函数中定义的一些基本类型的变量和对象的引用变量都在函数的栈内存中分配.当在一段代码块定义一个变量时,Java就在栈 ...

  8. javaScript系列 [43]-TS、Class and ES5

    本文讨论Typescript中的Class同ES5构造函数的对应关系,涉及TypeScript的诸多语法.构造函数.面向对象以及原型对象等相关知识点细节,本文只简单对比并不进行深入展开. TypeSc ...

  9. Ubuntu18.04 + Windows10 双系统安装

    此处忽略Windows10安装!!! 准备 安装环境 OS:Windows10 CPU:Intel(R) Core(TM) i5-10600KF CPU @ 4.10GHz 4.10 GHz GPU: ...

  10. rabbimq集群搭建报错:Error: unable TO perform an operation ON node 'rabbit@test3'. Please see diagnostics information AND suggestions below.

    在搭建rabbitmq集群的时候,添加内存节点时,抛出异常:Error: unable TO perform an operation ON node 'rabbit@test3'. Please s ...