Vue监视器

2023-12-10 08:07:03
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>监视器</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <div style="background-color: yellowgreen">
                姓名：<input type="text" v-model="name"><br><br>
                <span>我想去{{where}}</span><br>
                <button @click="changeCity">切换城市</button>
            </div>
            <hr>
            <div style="background-color: burlywood">
                numbers.x：<input type="text" v-model="numbers.x"><br><br>
                numbers.y：<input type="text" v-model="numbers.y"><br><br>
            </div>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;//关闭生产提示
            // 实例化Vue对象
            const vm = new Vue({
                el: "#root",
                data: {
                    name: "张三",
                    city: "北京",
                    numbers: {
                        x: 0,
                        y: 0,
                    }
                },
                computed: {
                    where() {
                        console.log("this.city.trim()", this.city.trim())
                        return this.city.trim() === "北京" ? "南极" : "北京";
                    }
                },
                methods: {
                    changeCity() {
                        console.log(this.city.trim());
                        this.city = this.city.trim() === "北京" ? "南极" : "北京";
                    }
                },
                watch: {
                    city: {
                        immediate: true,
                        handler(v0, v1) {
                            console.log(v0, v1);
                            console.log("city被改变了")
                        }
                    },
                    // 监视多级属性中的底层属性
                    "numbers.x": {
                        handler() {
                            console.log("numbers.x发生改变");
                        }
                    },
                    numbers: {
                        // 开启深度监视，只要numbers中的任意内部属性发生改变，都可以监听到
                        deep: true,
                        handler() {
                            console.log("numbers中的属性发生改变了")
                        }

                    },
                    // 简写方式，当只有回调函数handler()时,可以采用这种方式
                    city(v0, v1) {
                        console.log("简写！！！！",v0, v1);
                    }
                }
            });
            // 监视器的第二种定义方式
            vm.$watch("city", {
                immediate: true,
                handler(v0, v1) {
                    console.log(v0, v1);
                    console.log("city被改变了!!!!!!")
                }
            })
            // 简写方式
            vm.$watch("city", function (a, b) {
                console.log("city发生改变===>", a, b);
            })
        </script>
    </body>
</html>
Vue监视器
码农公寓

相关文章
