Vue之监听数据变化

来源：互联网发布：网络销售岗位职责编辑：程序博客网时间：2024/04/30 09:16

1.轻度监视

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></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(){                alert('发生变化了');                this.b=this.a+100;            });            document.onclick=function(){                vm.a=1;            };        };    </script></head><body>    <div id="box">        {{a}}        <br>        {{b}}    </div></body></html>

初始状态：

点击完后：

2.深度监视：deep:true

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></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:{                    json:{name:'strive',age:16},                    b:2                }            });            vm.$watch('json',function(){                alert('发生变化了');            },{deep:true});            document.onclick=function(){                vm.json.name='aaa';            };        };    </script></head><body>    <div id="box">        {{json | json}}        <br>        {{b}}    </div></body></html>

阅读全文

1 0