29- Vue -- watch用法

原创

咸咸瑜瑜 2022-05-31 17:22:32 ©著作权

文章标签 数据 vue.js javascript 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者咸咸瑜瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

watch

上面说到了绑定，这里说一下 watch 这个属性，他是和 data 那些属性同一个级别的，

他的作用是监听data数据改变，他有两个参数，第一个是新值（改变后的值），第二个是旧值（之前的值）

下面代码已充分解释了

<div id="app">
    已绑s1 : <input type="text" v-model="id">
    <br>
    已绑s2 : <input type="text" v-model="name">

    <p>id: {{id}}</p>
    <p>name: {{name}}</p>
</div>


<script src="js/vue.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            id: "",
            name: ""
        },
        watch:{
            id(NewValue,OldValue){
                console.log("新" + NewValue);
                console.log("旧" + OldValue);
            },
            name(s1,s2){
                console.log("新" + s1);
                console.log("旧" + s2);
            }
        }
    })
</script>