vue中watch的用法

vue中watch的用法当 vue 项目中需要对某个值进行监听做一些操作的时候我们会用到 watch 进行监听 1 监听普通属性 单一字符串 布尔值 等等 data return dvid goodsInfo userInfo closeTime 0 关仓倒计时 watch closeTime newVal oldVal console log newVal oldVal

当vue项目中需要对某个值进行监听做一些操作的时候我们会用到watch进行监听:

1:监听普通属性:

单一字符串,布尔值,等等

data() { 
    return { 
    dvid: '', goodsInfo: [], userInfo:{ 
   }, closeTime:0,//关仓倒计时 } }, 
watch:{ 
    closeTime(newVal, oldVal){ 
    console.log(`${ 
     newVal} : ${ 
     oldVal}`); } }, 

注意:watch第一次绑定值的时候不会执行监听,如果需要第一次就执行监听 则需要设置:immediate: true

watch:{ 
    closeTime: { 
    handler (newName, oldName) { 
    console.log(`${ 
     newVal} : ${ 
     oldVal}`); }, immediate: true } } 

2:监听对象:

监听对象需要用到深度监听 设置deep:true

watch: { 
    closeTime: { 
    handler(newName, oldName) { 
    console.log(`${ 
     newVal} : ${ 
     oldVal}`); }, immediate: true, deep: true } } 

可以可以单独监听对象的某个属性 对象.xxx

监听数组:

注意:与对象监听一样 区别在于数组不需要深度监听

tips:watch中不能使用箭头函数 箭头函数this指向为当前作用域

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/233783.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • pycharm专业版永久激活码-激活码分享

    (pycharm专业版永久激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月30日
    1.9K
  • windows安装git教程_git安装教程图文详解

    windows安装git教程_git安装教程图文详解1.版本控制概述1.1Git什么是版本控制在我们日常生活中,使用微信6.5.3版本,QQ7.4版本,Chrome43.0.2357.65版本,表示的都是某些软件使用的版本号。这些软件在开发过程中,版本都是由1不断的变化而来。对于软件公司来说,软件的开发过程中的变化,都需要记录下来,从而方便软件开发的管理,这个过程就是版本控制。也就是,记录若干文件内容变化,以便将来查阅特定版本修订情况的系统(软件)。1.2常见版本控制软件CVS表示并发版本系统,是老版本控制软件系统,市面上基本上不使用了。

    2022年9月4日
    2
  • Jboot_bootlace

    Jboot_bootlace@OverridepublicSwAdminfindById(longid){returnDAO.findFirst("SELECT*FROMsw_adminWHERE

    2022年8月1日
    3
  • vue路由懒加载_vue路由原理怎么回答

    vue路由懒加载_vue路由原理怎么回答路由懒加载能够提高页面的加载速度,不过使用也得看场合。有时候需要懒加载,提升首页加载速度,一般是页面层级较为复杂的时候。大家看一下不加代码分割浏览器加载的文件。 这里蓝色部分是webpack自动分割出来的,当修改业务js时候manifest和vendor是不会改变的,浏览器直接在缓存中提取。会变的是app.js。如果不采用路由分割会是什么效果呢。所有的代码都打包到app.js中,如果项目巨大,那

    2022年10月7日
    0
  • 码农盖房记,纯图片

    码农盖房记,纯图片

    2021年8月26日
    48
  • 理解dropout

    理解dropout开篇明义,dropout是指在深度学习网络的训练过程中,对于神经网络单元,按照一定的概率将其暂时从网络中丢弃。注意是暂时,对于随机梯度下降来说,由于是随机丢弃,故而每一个mini-batch都在训练不同的网络。dropout是CNN中防止过拟合提高效果的一个大杀器,但对于其为何有效,却众说纷纭。在下读到两篇代表性的论文,代表两种不同的观点,特此分享给大家。

    2022年4月27日
    41

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号