Vue watch监听 date中的变量 与 数组或者对象的数据变化
直接看下面代码:
1.红色的的为一个对象,watch监听时。需要借助 computed 属性,否则watch监听打印出来的新旧值看不出。(注:方法可以随便写,但是 computed 中 与 watch的名字要一致,且computed中必须return返回值。)
2.蓝色的的为一个普通的变量,watch监听获取它的新旧值时,直接在watch中书写即可。(注:名字必须为 要监听的 变量名字)
data(){
return{
Form:{aaa: '',bbb:''},
value: '',
}
} computed: {
NewForm() {
return JSON.parse(JSON.stringify(this.Form));
},
},
watch: {
NewForm: {
handler(newVal, oldVal) {
console.log('旧值:',oldVal);
console.log('新值:',newVal);
},
deep: true, //深度监听(可监听到对象、数组的变化)
},
value(newVal,oldVal) {
console.log('旧值:',oldVal);
console.log('新值:',newVal);
}
}
Vue watch监听 date中的变量 与 数组或者对象的数据变化的更多相关文章
- Javascript中判断变量是数组还是对象(array还是object)
怎样判断一个JavaScript变量是array还是obiect? 答案: 1.如果你只是用typeof来检查该变量,不论是array还是object,都将返回‘objec'. 此问题的一个可行的答案 ...
- js 中判断变量是数组还是对象,和判断对象是否为空
判断是对象还是数组 var ids={ id:'1',num:'2' } if(Array.isArray(ids) == false) {console.log('不是数组,对象') } else ...
- 9.Vue.js 监听属性
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...
- 设计模式(5): vue 不监听绑定的变量
概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...
- vue时时监听input输入框中 输入内容 写法
Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...
- Fragment-如何监听fragment中的回退事件与怎样保存fragment状态
一.如何监听Fragment中的回退事件 1.问题阐述 在Activity中监听回退事件是件非常容易的事,因为直接重写onBackPressed()函数就好了,但当大家想要监听Fragment中的回退 ...
- Spring Boot 监听 Activemq 中的特定 topic ,并将数据通过 RabbitMq 发布出去
1.Spring Boot 和 ActiveMQ .RabbitMQ 简介 最近因为公司的项目需要用到 Spring Boot , 所以自学了一下, 发现它与 Spring 相比,最大的优点就是减少了 ...
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- ASP.NET Core 发布之后通过命令控制监听地址和环境变量
添加Command支持 新建一个ASP.NET Core 项目,打开Program.cs 添加下面的代码: public class Program { public static void Main ...
随机推荐
- 【ARM架构】armv8 系统安全概述
ARMv8-A 系统中的安全 一个安全或可信的操作系统保护着系统中敏感的信息,例如,可以保护用户存储的密码,信用卡等认证信息免受攻击. 安全由以下原则定义: 保密性:保护设备上的敏感信息,防止未经授权 ...
- MRI病变能否预测已获临床缓解的早期RA未来放射学进展
MRI病变能否预测已获临床缓解的早期RA未来放射学进展 Tamai M, et al. EULAR 2015. Present ID: FRI0048. 原文 译文 FRI0048 MRI BONE ...
- nodemon 实现 TypeScript 项目热部署
下载安装 ts-node.nodemon: npm i -D ts-node nodemon 配置package.json脚本: "dev": "nodemon --wa ...
- LeetCode-1765 地图中的最高点
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/map-of-highest-peak 题目描述 给你一个大小为 m x n 的整数矩阵 isWa ...
- app启动性能分析
Activity启动流程 名词解释说明: Application OnCreate:加载第三方的sdk Activity OnCreate:加载自身的逻辑:发送远程数据请求:渲染界面List; 响应时 ...
- vue页面添加锚点后 点击不改变URL
html: <a @click="changeHash('#row')"> {{ $t("msg.desc1") }} </a> j ...
- ComWin’ round 11部分题解
https://vjudge.net/contest/325913#overview A.Threehouses 题意:一直二维平面上的$n$个点中,前$e$个点落在小岛周围,并且有$p$条边已经连接 ...
- iPhone添加节假日日历地址
添加苹果节假日日历地址 手动订阅节假日: 打开"设置">"日历">"帐户">"添加帐户">&qu ...
- echart lengend 选中事件
根据列选项 来改变echart y轴数值 前4个指标 甲方要求 95~100 第5个 要求 0~10如果混合起来 就是 0~100 这时的我 不由的破口大骂!!!但是 该干的活还是得干 干货如下:
- dart 学习笔记
1.dart 下载安装,vscode 安装dart ,coderunner等 2.dart语法 1)需要入口函数main,或者void(没有返回值) main 2)定义变量 var str='kkk' ...