vue 监听变量或对象
注意:监听的对象必须已经在data中声明了
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// string method name
b: 'someMethod',
// deep watcher
e: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// the callback will be called immediately after the start of the observation
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true
},
e: [
function handle1 (val, oldVal) { /* ... */ },
function handle2 (val, oldVal) { /* ... */ }
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1
比如下面例子
//监听某个变量
watch: {
bet(newValue, oldValue) {
console.log(newValue);
}
}
//监听对象 某一个属性
watch: {
'bet.text': function (val, oldVal) {}
}
//监听 整个对象(数组)
serviceList:{
handler(){ //注意此处就是handler
console.log(this.serviceList);
},
deep:true,
immediate: true // watch 的一个特点是,最初绑定的时候是不会执行的,要等到 serviceList 改变时才执行监听计算。加上改字段让他最初绑定的时候就执行
},
对于vue的深层对象数组的监控 可能不能得到及时的刷新 直接对比oldVal 和newVal时可能对比不出变化来,若想根据具体值的变化 而对内部其他的参数赋值 需要在nextTick里面进行,比如:
vue 监听变量或对象的更多相关文章
- 用VUE监听数组和对象的变化
看一下演示代码,先是增加数组和对象. <template> <div> <p>这是我定义的数组</p> <div>{{this.arr}}& ...
- React和Vue中,是如何监听变量变化的
React 中事件监听 本地调试React代码的方法 先将React代码下载到本地,进入项目文件夹后yarn build 利用create-react-app创建一个自己的项目 把react源码和自己 ...
- vue 监听对象里的特定数据
vue 监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...
- vue watch监听不到对象,探究 watch 原理
最近使用vue watch时,在某些模块监听不到对象的改变,无法触发回调函数. 解决: 使用watch监听对象时,只能监听到该对象初始化时已存在的key值. 如下例监听user对象,在初始化时没有ag ...
- Vue跨路由触发事件,Vue监听sessionStorage
近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- vue 监听页面宽度变化 和 键盘事件
vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...
- Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 监听键盘,键盘修饰符keyup
附录:键盘Key Code对照表 代码: <!doctype html> <html lang="en"> <head> <meta ch ...
随机推荐
- Openwrt配置小记
手中有台Netgear WNR2000v3,一直想尝试Openwrt,于是刷机.官方最新固件的稳定版本为15.05.1,该版本自带luci,BUT,不能保存配置,上网查了很久,得出结论,是由于WNR2 ...
- JS精准倒计时(支持自定义模板)
/** * 倒计时 Create By TuJia @2017.10.17 * 使用方法: * leftTimer.run(container[,theme][,callback]); * * 支持 ...
- java的同步方法和同步代码块,对象锁,类锁区别
/** * @author admin * @date 2018/1/12 9:48 * 作用在同一个实例对象上讨论 * synchronized同步方法的测试 * 两个线程,一个线程调用synchr ...
- VSCode远程调试Go程序方法(Attach)
set launch.json { "name": "Attach", "type": "go", "requ ...
- 【CF434D】Nanami's Power Plant 最小割
[CF434D]Nanami's Power Plant 题意:有n个二次函数$y=a_ix^2+b_ix+c_i$($a_i,b_i,c_i$是整数),第i个函数要求x的取值在$[l_i,r_i]$ ...
- iOS - 集成高德SDK解决Marker点重复点击无效问题
场景: 在处理Marker点击事件时,此时地图上有Marker点A及Marker点B,当选中Marker点A后,SDK方法 "didSelectAnnotationView"响应了 ...
- 百度Aip人脸识别之python代码
用python来做人脸识别代码量少 思路清晰, 在使用之前我们需要在我们的配置的编译器中通过pip install baidu-aip 即可 from aip import AipFace 就可以开 ...
- vue 拍照上传图片 demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java 测试连接Oracle数据库是否成功,ojdbc7.jar包下载
需要用到的jar 包: 链接:https://pan.baidu.com/s/1I1pC2f81IvbphZ6tWpVFOg 密码:uq0u 测试结果: package pkg; import jav ...
- HTTPclient 4.2.2 传参数和文件流
package com.http; import java.io.File; import java.io.IOException; import java.io.UnsupportedEncodin ...