有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue 中的watch监听方法

vue cat 8个月前 (02-17) 40次浏览 已收录 0个评论 扫描二维码

watch浅监听:监听基本数据类型

    <div id="app">
        <input type="text" v-model="msg">
    </div>
        new Vue({
            el: '#app',
            data: {
                msg: '',
            },
            watch: {
                // 语法
                // 要监听的数据:监听函数(默认接受两个参数)
                msg(newV, oldV) {
                    console.log(newV, oldV);
                }
            }
        })

watch深监听:监度听复杂数据类型

    <div id="app">
        <input type="text" v-model="obj.num">
    </div>
        new Vue({
            el: '#app',
            data: {
                obj: {
                    num: 1,
                }
            },
            watch: {
                // 对象类型无法使用浅监听
                obj: {
                    handler(newv) {
                        console.log(newv);
                    },
                    deep: true, //深度监听
                }
            },
        })
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址