美文网首页
17-基础-实例选项-watch-基本使用

17-基础-实例选项-watch-基本使用

作者: 这是这时 | 来源:发表于2019-05-28 01:17 被阅读0次
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width,initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=edge'>
        <title>Document</title>
    </head>
    <body>
        <div id='app'>
            {{msg}}
            <input type="text" v-model="msg">
        </div>
        <script src='./vue.js'></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    msg: "abc"
                },
                // watch选项 
                // 作用: 监测data数据变化
                // 特点: 被监测data数据变化时 自动触发函数
                watch: {
                    // 被监测的数据:function(新值,old值){}
                    // msg:function(newVal,oldVal){
                    // }
                    msg(newV, oldV) {
                        console.log(newV, oldV);
                        // 异步操作  比如ajax 定时器等
                    }
                },
                methods: {
                }
            });
        </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:17-基础-实例选项-watch-基本使用

          本文链接:https://www.haomeiwen.com/subject/zbpltctx.html