Vue侦听器

当我们挂载内部的绑定数据发生变化,如果我们向需要执行一些处理程序才处理业务逻辑
就可以使用vue的侦听器watch属性。这个需要添加watch配置项。
    <div id="app">
        <p>我的名字是:{{name}}</p>
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <p>次数:{{num}}</p>
    </div>
        let vm = new Vue({
            el : "#app",
            data : {
                'name' : '颜孙达1234',
                'firstName' : '颜',
                'lastName'  : '孙达',
                'num' : 0,
            },
            // 监听data数据的变化,一旦数据发生改变,执行某个行为
            // watch里面定义的函数,函数名就是我们要监听的变量名
            watch: {
                firstName() {
                    this.num++;
                },
                lastName() {
                    this.num++;
                }
            }
        })

 

posted @ 2024-08-16 16:33  洛飞  阅读(9)  评论(0编辑  收藏  举报