29- Vue -- watch用法

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>