您的位置：首页 > 产品设计 > UI/UE

【12】vue.js — 监听数据变化

2017-09-07 17:07 639 查看

监听普通数据变化

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
{{a}}
<br />
{{b}}
</div>
</body>
<script>
window.onload=function(){
var vm = new Vue({
el: '#box',
data: {
a: 111,
b: 2
}
});

vm.$watch('a',function(){
alert("发生变化了");
this.b = this.a + 100;
});

document.onclick = function(){
vm.a = 1;
}
}
</script>
</html>

上述页面初始化时，显示a为101, b为2，当页面点击之后会弹出“发生变化了”的弹窗，然后a的值变为1，b的值变为101。下面我们来看看

监听json数据变化

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
{{json | json}}<!-- 处理显示json数据 -->
<br />
{{b}}
</div>
</body>
<script>
window.onload=function(){
var vm = new Vue({
el: '#box',
data: {
json:{name:'strive',age:16},
b: 2
}
});

vm.$watch('json',function(){
alert("发生变化了");
this.b = this.json.age + 100;
});

document.onclick = function(){
vm.json.name = 'youxin';
}
}
</script>
</html>

上述代码当我们点击页面时发现json数据内容会发生改变，但里面弹窗不会弹出。

我们可以为$watch方法加上如下参数

vm.$watch('json',function(){
alert("发生变化了");
this.b = this.json.age + 100;
},{
deep:true
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue vue监听数据变化

相关文章推荐

新的分享

章节导航