广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue使用watch监听数组或对象
  • 653
分享到

Vue使用watch监听数组或对象

2024-04-02 19:04:59 653人浏览 安东尼
摘要

1、普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoint

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; i < newValue.length; i++) {
        if (oldValue[i] != newValue[i]) {
          console.log(newValue)
        }
      }
    },
    deep: true
  }
}

3、对象的watch

data() {
  return {
    bet: {
      pokerState: 53,
      pokerHistory: 'local'
    }  
    }
},
watch: {
  bet: {
    handler(newValue, oldValue) {
      console.log(newValue)
    },
    deep: true
  }
}

tips: 只要bet中的属性发生变化(可被监测到的),便会执行handler函数;
如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。
事例如下:

 4、对象具体属性的watch[活用computed]

data() {
  return {
    bet: {
      pokerState: 53,
      pokerHistory: 'local'
    }  
    }
},
computed: {
  pokerHistory() {
    return this.bet.pokerHistory
  }
},
watch: {
  pokerHistory(newValue, oldValue) {
    console.log(newValue)
  }
}

到此这篇关于Vue使用watch监听数组或对象的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Vue使用watch监听数组或对象

本文链接: https://www.lsjlt.com/news/152648.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue使用watch监听数组或对象
    1、普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoint...
    99+
    2022-11-13
  • Vue怎么使用watch监听数组或对象
    这篇文章主要介绍“Vue怎么使用watch监听数组或对象”,在日常操作中,相信很多人在Vue怎么使用watch监听数组或对象问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue怎么使用watch监听数组或对象...
    99+
    2023-07-02
  • 如何使用watch监听路由变化和watch监听对象
    这篇文章主要介绍了如何使用watch监听路由变化和watch监听对象,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、watch监听路由变化...
    99+
    2022-10-19
  • Vue Watch方法不能监听到数组或对象值的改变怎么解决
    这篇文章主要介绍了Vue Watch方法不能监听到数组或对象值的改变怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue Watch方法不能监听到数组或对象值的改变怎么解决文章都会有...
    99+
    2023-06-29
  • Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变详解
    目录前言一:利用索引直接改变arr的值 如我在button事件中写的(arr[0]=1000)二:直接修改数组的长度 如this.arr.length=3 总结如下前言 V...
    99+
    2022-11-13
  • Vue中怎么利用watch监听数组
    今天就跟大家聊聊有关Vue中怎么利用watch监听数组,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1.普通的watchdata() { ...
    99+
    2022-10-19
  • 使用watch监听对象里面值的变化
    目录watch监听对象里面值的变化1.样式代码2.data里的代码3.watch监听watch如何深度监听对象变化深度监听总结watch监听对象里面值的变化 后台管理有时候有选择选择...
    99+
    2023-01-14
    watch监听对象 watch监听 watch监听对象值变化
  • vue中watch如何监听对象及对应值的变化
    这篇文章主要为大家展示了“vue中watch如何监听对象及对应值的变化”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中watch如何监听对象及对应值的变化...
    99+
    2022-10-19
  • vue中watch监听对象中某个属性的方法
    目录immediate 和 handlerdeep 深度监听以currentParams为例,监听selOrgId属性immediate 和 handler watch 的用法有个特...
    99+
    2023-05-17
    vue watch监听对象属性 vue watch监听
  • Vue数据监听器watch和watchEffect的使用
    目录watch()函数watchEffect()函数watch与watchEffect之间的联系与区别我们都知道监听器的作用是在每次响应式状态发生变化时触发,在组合式 API 中,我...
    99+
    2023-02-23
    Vue watch监听器 Vue watchEffect监听器 Vue 监听器
  • Vue3中怎么使用watch监听对象的属性值
    这篇文章主要介绍“Vue3中怎么使用watch监听对象的属性值”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue3中怎么使用watch监听对象的属性值”文章能帮助大家解决问题。Vue3 中使用 w...
    99+
    2023-07-04
  • vue怎么使用watch监听属性
    这篇文章主要介绍了vue怎么使用watch监听属性的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么使用watch监听属性文章都会有所收获,下面我们一起来看看吧。基本用法Vue watch最重要的使用场景...
    99+
    2023-06-30
  • Vue数据监听器watch和watchEffect如何使用
    本文小编为大家详细介绍“Vue数据监听器watch和watchEffect如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue数据监听器watch和watchEffect如何使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入...
    99+
    2023-07-05
  • vue如何用watch监听数据变化
    这篇文章主要介绍“vue如何用watch监听数据变化”,在日常操作中,相信很多人在vue如何用watch监听数据变化问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue如何用watch监听数据变化”的疑惑有所...
    99+
    2023-07-04
  • Vue3中watch监听对象的属性值(监听源必须是一个getter函数)
    目录Vue3 中使用 watch 侦听对象中的具体属性1.前言2. 原因3.watch源码分析4.doWatch源码分析5.总结Vue3 中使用 watch 侦听对象中的具体属性 1...
    99+
    2022-12-20
    Vue3 watch监听对象 Vue3 watch监听 Vue3  getter函数
  • Vue watch监听使用的几种方法
    目录一、watch使用的几种方法二、watch中的immediate与handler和deep属性一、watch使用的几种方法 1、 通过 watch 监听 msg 数据的变化。 w...
    99+
    2022-12-22
    Vue watch监听 Vue watch监听原理
  • vue如何使用watch监听指定数据的变化
    目录使用watch监听指定数据的变化vue watch监听多个值使用watch监听指定数据的变化  在vue中,可以使用watch属性来监听data中某个属性值的变化。 &...
    99+
    2022-11-13
  • vue中怎么利用watch监听数据变化
    vue中怎么利用watch监听数据变化,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1、watch使用的几种方法(1)通过watch监听dat...
    99+
    2022-10-19
  • vue3怎么使用watch/watchEffect监听数据
    这篇文章主要介绍“vue3怎么使用watch/watchEffect监听数据”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue3怎么使用watch/watchEffect监听数据”文章能帮助大家解...
    99+
    2023-07-06
  • 关于Vue不能监听(watch)数组变化的解决方法
    目录一、vue监听数组 二、vue无法监听数组变化的情况 一、vue监听数组 vue实际上可以监听数组变化,比如 data () { return { watchA...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作