zoukankan html css js c++ java

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>

查看全文

相关阅读:
Java annotation
子类父类强转 HttpServlet service实现
 父类子类强转
 HttpServlet Service方法
 java go
IO写 PrintWriter
IO读 BufferedReader+FileReader
Java NIO-3
心跳包(HeartBeat)
Git学习笔记(一)

原文地址：https://www.cnblogs.com/a973692898/p/12685209.html