侦听器watch

   <div id="app">
        <input type="text" v-model="msg">
        <h3>{{msg}}</h3>
        <br>
        <h3>{{stus[0].name}}</h3>
        <button @click='stus[0].name = "Tom"'>改变</button>
    </div>


    <script>
        // 基本的数据类型可以使用watch直接监听,复杂数据类型object、array需要深度监听
        new Vue({
            el: '#app',
            data: {
                msg: '',
                stus: [{
                    name: 'jack'
                }]
            },
            watch: {
                //key是属于data对象的属性名,value:是监听后的行为 newV表示新值,oldV是旧值
                'msg': function(newV, oldV) {
                    console.log(newV, oldV);
                    if (newV === '100') {
                        console.log('hello');
                    }
                },
                //深度监听:监听object/array
                'stus': {
                    deep: 'true',
                    handler: function(newV, oldV) {
                        console.log(newV[0].name);
                    }
                }
            },
        })
    </script>

 

posted @ 2020-05-16 11:02  南啾  阅读(165)  评论(0编辑  收藏  举报