Vue中$watch的简单应用和理解

最新推荐文章于 2025-06-20 09:49:04 发布

原创最新推荐文章于 2025-06-20 09:49:04 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #$watch

vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用Vue.js创建表单的例子，并详细解释了如何利用watch特性来监听表单字段的变化，当用户名和密码发生变化时触发特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

watch

<template>
    <div>
       <div class="form_line">
            <label>用户名:</label>
            <input v-model="info.name" placeholder="请输入用户名" />
        </div>
        <div class="form_line">
            <label>密码:</label>
            <input v-model="info.passw" placeholder="请输入密码" />
        </div>
        <div>
            <button type="button" ref="btn" @click="setClick">按钮</button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            info: {
                name: '', // 用户名
                passw: '' // 密码
            },
        }
    },
    watch: {
        info: {  // 这监听对象值的改变 和上面的不一样。
            handler(curVal,oldVal){
                console.log(curVal);
                this.setClick()
            },
            deep: true, 
        },
    },
    methods:{
        setClick(){
            alert('点击')
        }  
    }
}
</script>

他是一个对象，此时我是监听的是data里面数值的改变，当我监听到我用户名和密码改变的时候，就触发alert。watch后面跟的是我要监听的参数info,watch有自己的监听函数handler，他能监听我当前的值和改变之前的值，如果监听的是data里面的值，deep是为必须的，他的意思就是监听data里面所有的数值变化。