新建 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. 1479 小Y的数论题

    小Y喜欢研究数论,并且喜欢提一些奇怪的问题.这天他找了三个两两互质的数a, b, c,以及另一个数m, 现在他希望找到三个(0, m)范围内的整数x, y, z,使得 (xa+yb) Mod m=(z ...

  2. DevTools 实现原理与性能分析实战

    一.引言 从 2008 年 Google 释放出第一版的 Chrome 后,整个 Web 开发领域仿佛被注入了一股新鲜血液,渐渐打破了 IE 一家独大的时代.Chrome 和 Firefox 是 W3 ...

  3. ZOJ 3778:Talented Chef(贪心?思维)

    Talented Chef Time Limit: 2 Seconds Memory Limit: 65536 KB As we all know, Coach Gao is a talented c ...

  4. WHT, SLANT, Haar

    目录 基本 酉变换 WALSH-HADAMARD TRANSFORMS sequency-ordered WHT SLANT TRANSFORM Haar Transform Gonzalez R. ...

  5. [opencv]<学习Opencv>英文原版翻译学习

    [注]下文全部内容为 <<Learning OpenCV 3: Computer Vision in C++ with the OpenCV Library>>经由在线翻译整理 ...

  6. Rank & Sort Loss for Object Detection and Instance Segmentation 论文解读(含核心源码详解)

    第一印象 Rank & Sort Loss for Object Detection and Instance Segmentation 这篇文章算是我读的 detection 文章里面比较难 ...

  7. MongoDB分片设计

    #### 如何做好分片集群 * 合理的架构 * 是否需要分片? * 要分多少片? * 数据分布规则? * 正确的姿势 * 选择需要分片的表 * 选择正确的片键 * 使用合适的均衡策略 * 足够的资源 ...

  8. centos6.5-svn搭建文档

    下载相关软件 wget http://subversion.tigris.org/downloads/subversion-1.6.6.tar.gz wget http://subversion.ti ...

  9. mysql编译报错

    1.make报错现象 Warning: Bison executable not found in PATH 解决办法 yum -y install bison 2.make报错现象 ake Erro ...

  10. CAD快速入门--绝望

    从入门到放弃 咱是革命一块砖,哪里需要哪里搬.(需求来自领导,让我一个敲代码的画CAD图纸,可以想象我在一个什么样的公司,在为什么样的老板赚钱,不多说了下面开始学习). CAD绘图功能优化与基本操作 ...