vue监听对象及对象属性问题

监听整个对象，使用watch就行

export default {
  data() {
    return {
      a: {
        b: 1,
        c: 2
      }
    }
  },
  watch() {
    a: {
      handler(newVal, oldVal) {
        console.log('监听a整个对象的变化');
      },
      deep: true
    }
  }
}

监听对象中具体属性的变化，需要使用watch配合computed

export default {
  data() {
    return {
      a: {
        b: 1,
        c: 2
      }
    }
  },
  watch() {
    bChange() {
      console.log('监听a对象中b属性的变化');
    }
  },
  computed: {
    bChange() {
      return this.a.b;
    }
  }
}
赞 (0)

相关推荐

  • 使用watch监听路由变化和watch监听对象的实例

    一.watch监听路由变化 解决办法: export default{ data(){ return{} }, watch:{ "$route":"getPath" // 监听事件 }, methods:{ getPath(){ let path = this.$roune.path; //或得当前路径 进行逻辑判断 } } } 二.watch监听对象 例子: <el-select v-model="form.region" placeho

  • Vue2 监听属性改变watch的实例代码

    效果: 代码: <div id="app2"> <label>幼儿园入学年龄(3-6):</label><input type="number" v-model="child.age"> <button @click="older"> + </button> <button @click="younger"> - </

  • 解决Vue2.0 watch对象属性变化监听不到的问题

    问题 很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性.发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了. 解决 为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除. 请参照https://v1-cn.vuejs.org/guide/reactivity.html 解决方式: 通过vue的this.$set(object, key, value)方法 通过Object.assign()

  • vue watch监听对象及对应值的变化详解

    如下所示: var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的 }, deep:true }

  • 关于vue中watch检测到不到对象属性的变化的解决方法

    关于vue中watch检测到不到对象属性的变化的解决方法

    前言 在vue开发的过程中发现一个问题:改变vue.$data中对象的属性,watch是观测不到变化,但其实对象的属性是有变化的.这--,有点难以置信! 正文 <template> <div> <dl>name: {{option.name}}</dl> <dl>age: {{option.age}}</dl> <dl> <button @click="updateAgeTo25">upda

  • 详解vue2.0监听属性的使用心得及搭配计算属性的使用

    我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助: 1.基础版监听: 场景如下:输入框输入你的年龄,如果年龄在0-15岁提示信息:你还是个小孩,如果年龄在 15-25岁,提示信息:你已经是个少年,如果年龄在25岁以上,提示信息:你已经长大了.根据需求配合监听属性我们得到下面的代码: <template> <div id="app"> 年齡:<input type

  • vue监听对象及对象属性问题

    监听整个对象,使用watch就行 export default { data() { return { a: { b: 1, c: 2 } } }, watch() { a: { handler(newVal, oldVal) { console.log('监听a整个对象的变化'); }, deep: true } } } 监听对象中具体属性的变化,需要使用watch配合computed export default { data() { return { a: { b: 1, c: 2 } }

  • Vue开发之watch监听数组、对象、变量操作分析

    本文实例讲述了Vue开发之watch监听数组.对象.变量操作.分享给大家供大家参考,具体如下: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } } 2.数组的watch:深拷贝 data() { return { winChips: new Array(11).fill(0) } }, watch: { winCh

  • Vue使用watch监听数组或对象

    1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } } 2.数组的watch data() { return { winChips: new Array(11).fill(0) } }, watch: { winChips: { handler(newValue, oldValue) { for (let i = 0;

  • Vue监听属性和计算属性

    Vue监听属性和计算属性

    目录 一.watch监听属性 1.购物车 2.全选与取消全选 二.计算属性 1.computed 2.methods 3.setter 一.watch监听属性 这个属性用来监视某个数据的变化,并触发相应的回调函数执行. 基本用法添加watch属性,值为一个对象.对象的属性名就是要监视的数据,属性值为回调函数,每当这个属性名对应的值发生变化,就会触发该回调函数执行. 回调函数有2个参数: newVal,数据发生改变后的值. oldVal,数据发生改变前的值. 计数器: <!DOCTYPE html

  • Vue2中无法监听数组和对象的某些变化问题

    Vue2中无法监听数组和对象的某些变化问题

    目录 一.数组 1. 不能监听的情况 2. 替代做法 3. 注意 二.对象 1. 不能监听的情况 2. 替代做法 三.分析 vue 2 无法监听数组和对象的这些变化的原因 1. 对于数组 2. 对象 四.vue 3响应式原理 关于vue监听的一些问题 对象的监听 数组的监听 一.数组 1. 不能监听的情况 (1) 直接通过下标赋值  arr[i] = value (2) 直接修改数组长度 arr.length = newLen 2. 替代做法 (1)修改值 Vue.set(arr, index,

  • vue监听input标签的value值方法

    由于项目需要做实时搜查询数据,所以需要监听input标签的value,这里使用的前端框架vue <input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/> 这里的重点是:@input="search($event)",表示当文本框有内容输入时,则调用search方法 /*模糊搜索*/

  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件,实现锚点链接平滑滚动 近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下): 1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动) 2.滚动右边的滚动条,左边对应的显示当前样式 3.若从别的页面点击菜品进来该页面,则该菜品为指定效果 小编也是vue的初学者,在阅读了大量的文章后,其中借鉴http://www.jb51.ne

  • 浅谈VUE监听窗口变化事件的问题

    Vuejs 本身就是一个 MVVM 的框架.但是在监听 window 上的 事件 时,往往会显得 力不从心. 比如 这次是 window.resize恩,我做之前也是百度了一下.看到大家伙都为这个问题而发愁. 问题: 今天我也 遇到了这样一个问题, 是关于canvas 自适应. 根据窗口的变化去变化 canvas 的宽度备注: 重要的问题说三遍 解决 框架内的bug 先说 框架 版本 版本 版本 (这里用的 Vue 2.x .ES6) 解决方案: 第一步: 先在 data 中去 定义 一个记录宽

  • Vue监听事件实现计数点击依次增加的方法

    1.实现计数器功能,每点击一次按钮,count值增加一或增加二,鼠标在cordinates行移动时会更新当前坐标,通过自定义函数或者stop属性禁止事件传播. 效果如下: 代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>计数器自增函数</title> <script src="vue.js"></s

  • vue监听页面中的某个div的滚动事件并判断滚动的位置

    在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点,现在的目标是,要监听这个xq-box滚动事件,右边一旦开始滚动,就要知道滚动到哪个子div,并让左边的目录树中对应的节点高亮显示.要怎么做呢? 1.首先,先写好大概的页面布局,这里要注意,右边xq-box的子div要绑定"'xqItem'+序号"的id,为了下面用js能获取到匹配的dom元

随机推荐