vue17 $watch 监听数据变化
2024-09-25 11:20:53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:111,
b:2
}
});
vm.$watch('a',function(){//监听器，a是监听哪个属性变化，
alert('发生变化了');
this.b=this.a+100;
});
document.onclick=function(){
vm.a=1;
};
};
</script>
</head>
<body>
<div id="box">
{{a}}
<br>
{{b}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
aajson:{name:'strive',age:16},
b:2
}
});
vm.$watch('aajson',function(){//不能监听json
alert('发生变化了');
}); document.onclick=function(){
vm.aajson.name='aaa';
};
};
</script>
</head>
<body>
<div id="box">
{{aajson | json}} <!-- 后面的json是解析成json字符串 -->
<br>
{{b}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
ajson:{name:'strive',age:16},
b:2
}
}); vm.$watch('ajson',function(){
alert('发生变化了');
},{deep:true}); document.onclick=function(){
vm.ajson.name='aaa';
};
}; </script>
</head>
<body>
<div id="box">
{{ajson | json}}
<br>
{{b}}
</div> </body>
</html>
最新文章
- shell简介
- py-faster-rcnn几个辅助脚本
- cocostudio做出来的界面如何进行分辨率适配，兼论cocos2dx3的多分辨率适配机制，以及retina适配机制
- [vim]的关键字补全
- Eclipse 复制按钮卡死
- 进程控制之exit函数
- 利用word2vec对关键词进行聚类
- C++中为什么要用虚函数、指针或引用才能实现多态？
- freemaker的基本语法
- 500多条Linux信息
- 同步队列-Queue模块解析
- Generic（泛型）
- Java 中的按值传递
- python简介和python工具的选择
- Android 源码编译之旅
- CentOS 软件安装（yum 和 rpm）
- hdu4763 Theme Section【next数组应用】
- Git安装与使用
- Is there a way to get a Cursor from a GreenDao Query object?
- 链接ftp，把文件或图片上传到ftp指定的文件夹中