<!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>
