新建 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】33. Search in Rotated Sorted Array 解题报告(Python & C++)

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

  2. 1046:Square Number

    总时间限制: 1000ms 内存限制: 65536kB 描述 给定正整数b,求最大的整数a,满足a*(a+b) 为完全平方数 输入 多组数据,第一行T,表示数据数.对于每组数据,一行一个正整数表示b. ...

  3. Chapter 14 G-estimation of Structural Nested Models

    目录 14.1 The causal question revisited 14.2 Exchangeability revisited 14.3 Structural nested mean mod ...

  4. rabbitmq-安装部署及基础操作

    rabbitmq 官网: https://www.rabbitmq.com/ yum 安装 rabbitmq # centos7 # In /etc/yum.repos.d/rabbitmq.repo ...

  5. vue安装使用v-chart时报错解决方案

    npm i v-charts echarts -S 1.在main.js中使用报以下错 liquidFill echarts/lib/visual/dataColor 找不到 出现此原因是因为版本问题 ...

  6. 使用Xcode 制作自定义storyboard启动界面,供uniAPP使用。

    1新建项目 想要全屏显示并适应所有尺寸的iPad和iphone 需要用750*1624 2X 和 1125 * 2436 3X大小的图片 这里做完就可以导出文件了 把文件和图片放到一起 见下图 命名规 ...

  7. 编写Java程序随机输入日期计算星期几,打印任意一年的日历

    需求说明: 随机输入日期计算星期几,打印任意一年的日历 已知,1900年1月1日是星期1,用户随机输入年月日,计算星期几 实现思路: 一.知道1900年1月1日为星期一,求输入的年份月份与1900年1 ...

  8. POI导入导出Excel(HSSF格式,User Model方式)

    1.POI说明 Apache POI是Apache软件基金会的开源代码库, POI提供对Microsoft Office格式档案读和写的功能. POI支持的格式: HSSF - 提供读写Microso ...

  9. C# UTF8的BOM导致XML序列化与反序列化报错:Data at the root level is invalid. Line 1, position 1.

    最近在写一个xml序列化及反序列化实现时碰到个问题,大致类似下面的代码: class Program { static void Main1(string[] args) { var test = n ...

  10. 您应该知道的35个绝对重要的Linux命令

    https://mp.weixin.qq.com/s?__biz=MzU3NTgyODQ1Nw==&mid=2247499293&idx=2&sn=1353b78d6ad01d ...