vue如何监听
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue如何监听相关的知识，希望对你有一定的参考价值。
参考技术A <!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="app">
<h1 @click="add">msg</h1>
<!-- <h1 @click="obj.a++">obj.a</h1>
<h1 @click="obj.b++">obj.b</h1> -->
<h1>obj</h1>
</div>
<script src="./vue2.6.14.js"></script>
<script>
new Vue(
el:"#app",
data:function ()
return
msg:'你好',
obj:
a:0,
b:0
,
/* 因为vue不是操作dom了，视图的变化是根据数据来的 */
/* 对数据进行实时监控的方法 监听器 */
watch:
/* handler是数据msg 发生变化的时候触发的方法 */
msg:
immediate:true,
handler:function(newVal,oldVal)
console.log('新值:'+newVal);
console.log('旧值:'+oldVal);
/* 对象里面的key 最传统的方式其实就是要加引号 */
// 'obj.a':
// immediate:true,
// handler:function(newV,oldV)
// console.log('a',newV,oldV);
//
// ,
// 'obj.b':
// immediate:true,
// handler:function(newV,oldV)
// console.log('b',newV,oldV);
//
// ,
// obj:
// immediate:true,
// handler:function(newV,oldV)
/* newV.a会报错使用 newV是一个变量 */
// console.log('obj',newV['a'],oldV['b']);
// ,
// /* 深度监听对象里面的属性值 */
// /* 深度监听 对象里面的值每次发生变化都会触发handler方法 */
// /* 因为对象是引用数据类型，所以
// 每次值发生变化，对应的内存地址并没有发生变化，所以newV
// 和oldV都是同一个 */
// deep:true
//
,
methods:
add()
/* this.msg = 'hello' */
/* console.log(this.obj); */
/* this.obj.c = '123' */
/* this.$set(this.obj,'c','123') */
/* delete this.obj.a */
/* this.$delete(this.obj,'a') */
)
/* 你写一个定时器 也页面有个数字 会一直加1 在加1的时候触发一个事件
打印余额加1 */
</script>
</body>
</html>
以上是关于vue如何监听的主要内容，如果未能解决你的问题，请参考以下文章