Vue监听数据变化

来源：互联网发布：房卡麻将源码教程编辑：程序博客网时间：2024/05/17 22:11

浅度监听

<!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">    <script src="../js/vue1.0.js"></script>    <script src="../js/vue-resource.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{                    a:111,                    b:2                }            });            vm.$watch('a',function(){                alert('发生变化了');            });            document.onclick = function(){                vm.a = 1;            }        }    </script></head><body><div id="box">    {{a}}    <hr>    {{b}}</div></body></html>

深度监听

<!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">    <script src="../js/vue1.0.js"></script>    <script src="../js/vue-resource.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{                    json:{name:'abcdef',age:'16'},                    b:2                }            });            vm.$watch('json',function(){                alert('发生变化了');            },{deep:true});            document.onclick = function(){                vm.json.name = "aaaaaa";            }        }    </script></head><body><div id="box">    {{json | json}}    <hr>    {{b}}</div></body></html>

0 0