第十三课 Vue中的watch观察模式

Vue中的watch观察模式

watch用于监测数据的变化,如果发生变化会及时返回修改前和修改后的数据

1)基础示例

复制代码
    <div id="app">
            <input type="text" v-model="val">
            <h1>{{change}}</h1>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                val: 'Hello World !',
                change: ''
            },
            watch: {
                val(news, olds){
                    this.change = 'new: ' + news + ' old: ' + olds;
                }
            }
        })
    </script> 

2)实例挂载

复制代码
    <div id="app">
        <input type="text" v-model="vals">
        <h1>{{vals}}</h1>
    </div>
    <script>
        new Vue({
            el: '#app', 
            data: {
                vals: 'Hello World !'
            }
        }).$watch('vals', function(newVal, oldVal){
            console.log('newVal: ' + newVal);
            console.log('oldVal: ' + oldVal);
        })
    </script>  
相关推荐
excel27 分钟前
JavaScript 中的二进制数据:ArrayBuffer 与 SharedArrayBuffer 全面解析
前端
ZXT1 小时前
代码规范与提交
前端
柑橘乌云_1 小时前
vue中如何在父组件监听子组件的生命周期
前端·javascript·vue.js
北海天空2 小时前
react-scripts的webpack.config.js配置解析
前端
LilyCoder2 小时前
HTML5中华美食网站源码
前端·html·html5
拾光拾趣录2 小时前
模块联邦(Module Federation)微前端方案
前端·webpack
江湖人称小鱼哥3 小时前
react接口防抖处理
前端·javascript·react.js
GISer_Jing3 小时前
腾讯前端面试模拟详解
前端·javascript·面试
saadiya~3 小时前
前端实现 MD5 + AES 加密的安全登录请求
前端·安全
zeqinjie3 小时前
回顾 24年 Flutter 骨架屏没有释放 CurvedAnimation 导致内存泄漏的血案
前端·flutter·ios