Vue 监听--->watch

关于Vue的监听:watch

watch是对单个属性的监听

对于基本数据类型的监听       简单监视

对于复杂数据类型的监听       深度监视

下面的代码,有一个简单监视  和 一个深度监视

<body>
    <div id="app">
        <input type="text" v-model='msg' /><br><br>
        <button @click="stus[0].name='rose'">改变</button>
        <h2>{{stus[0].name}}</h2>
        <h1>{{message}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    msg: '',
                    stus: [{ name: 'jack' }],
                    message: ''
                }
            },
            watch: {
                msg: function (newV, oldV) {//简单监视
                    console.log(newV, oldV);
                    if (newV === 'abcdefg') {
                        console.log('这是通过监听器,watch监听到的')
                    }
                },
                stus: {
                    deep: true,//深度监视
                    handler: function (newV, oldV) {
                        console.log(newV[0].name)
                        this.message = newV[0].name
                    }
                }
            }
        })
    </script>
</body>

 

posted @ 2020-04-12 14:48  大云之下  阅读(210)  评论(0)  编辑  收藏  举报
大云之下