1 - 普通监视
举例 : 监视当前温度的变化
(1)初始温度100度
data: {
temperature: 100,
},(2)设置监视函数
watch: {
temperature: {
handler(newValue, oldValue) {
if (newValue < oldValue) {
this.msg = "降温了，该加衣服了"
} else {
this.msg = "升温了，减少衣服吧"
}
let x = "温度被改变,现在的温度是：" + newValue + "，原来温度值是：" + oldValue + "温差是：" + (newValue - oldValue)
this.msg_info = x
console.log(x)
}
},
}(3)显示变化情况
<pre v-html="msg_info"></pre>(4) 设置降温的函数
methods: {
tempChange: function () {
this.temperature = this.temperature - 10
},
},(5) 设置升温按钮和降温的函数
<button class="btn btn-block btn-success" @click="tempChange">降低10度</button>
<button class="btn btn-block btn-danger" @click="temperature += 10">升温10度</button>执行结果:
2 - 深度监视
示例 : 谁偷了张无忌的武功?
(1) 设置张无忌的功夫
data: {
"student": {
"name": "张无忌",
"Kungfu": {
"kf1": "乾坤大挪移",
"kf2": "九阳神功"
}
},
},(2) 设置深度监视属性
watch: {
"student": {
deep: true,
handler(newValue) {
console.log(newValue)
}
},
}(3) 设置展示区域
<pre v-html="student"></pre>(4)触发改变 , 设置小偷
<button class="btn btn-block btn-danger" @click="student.name = `赵敏`">修改student的name</button>3 - 属性监视的简写
示例 : 张三到底时候了什么?
(1)
data: {
user: "张三",
lang1: "Vue.js是一套构建用户界面的渐进式框架",
lang2: "Go 是一个开源的编程语言，它能让构造简单、可靠且高效的软件变得容易。",
bo: true,
},(2) 属性计算获取张三到底说了什么?
computed: {
info: function () {
let x1 = this.user + "说：" + this.lang1
let x2 = this.user + "说：" + this.lang2
return this.bo ? x1 : x2
}
},(3) 设置属性监视
watch: {
bo(newValue, oldValue){
console.log("修改的值简写监视是:", newValue, oldValue)
}
}(4) 设置展示区域
<pre v-html="info"></pre>(5)按钮触发让张三说话
<button class="btn btn-block btn-danger" @click="bo = !bo">修改属性值1</button>执行结果 :
代码截图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/css/bootstrap.css">
</head>
<body class="container">
<div id="app">
<button class="btn btn-block btn-primary" @click="change">修改属性值1</button>
<button class="btn btn-block btn-danger" @click="bo = !bo">修改属性值1</button>
<button class="btn btn-block btn-success" @click="tempChange">降低10度</button>
<button class="btn btn-block btn-danger" @click="temperature += 10">升温10度</button>
<button class="btn btn-block btn-danger" @click="student.name = `赵敏`">修改student的name</button>
<button class="btn btn-block btn-danger" @click="student.Kungfu.kf1 = '吸星大法'">修改student.Kungfu[0]</button>
<button class="btn btn-block btn-danger" @click="student.Kungfu = '吸星大法'">修改student.Kungfu</button>
<button class="btn btn-block btn-danger" @click="teacher.name = '周芷若'">修改teacher.name</button>
<pre v-html="teacher.name"></pre>
<pre v-html="student.Kungfu.kf1"></pre>
<pre v-html="student.Kungfu"></pre>
<pre v-html="info"></pre>
<pre v-html="msg"></pre>
<pre v-html="msg_info"></pre>
<pre v-html="student"></pre>
</div>
<script src="static/js/jquery-3.6.0.js"></script>
<script src="static/js/vue.js"></script>
<script>
Vue.config.productionTip = false
var vm = new Vue({
el: "#app",
data: {
user: "张三",
lang1: "Vue.js是一套构建用户界面的渐进式框架",
lang2: "Go 是一个开源的编程语言，它能让构造简单、可靠且高效的软件变得容易。",
bo: true,
temperature: 100,
msg: "",
msg_info: "",
"student": {
"name": "张无忌",
"Kungfu": {
"kf1": "乾坤大挪移",
"kf2": "九阳神功"
}
},
teacher: {
"name": "灭绝师太",
"Kungfu": {
"kf1": "倚天剑",
"kf2": "屠龙刀"
}
},
},
methods: {
change: function () {
this.bo = !this.bo
},
tempChange: function () {
this.temperature = this.temperature - 10
},
x1: function () {
this.student.Kungfu.kf1 = '吸星大法'
}
},
computed: {
info: function () {
let x1 = this.user + "说：" + this.lang1
let x2 = this.user + "说：" + this.lang2
return this.bo ? x1 : x2
}
},
watch: {
temperature: {
handler(newValue, oldValue) {
if (newValue < oldValue) {
this.msg = "降温了，该加衣服了"
} else {
this.msg = "升温了，减少衣服吧"
}
let x = "温度被改变,现在的温度是：" + newValue + "，原来温度值是：" + oldValue + "温差是：" + (newValue - oldValue)
this.msg_info = x
console.log(x)
}
},
"student": {
deep: true,
handler(newValue) {
console.log(newValue.name)
}
},
teacher: {
deep: true,
handler(newValue, oldValue) {
console.log("修改的值是:", newValue, oldValue)
}
},
bo(newValue, oldValue) {
console.log("修改的值简写监视是:", newValue, oldValue)
}
}
})
vm.$watch("temperature", {
handler(newValue, oldValue) {
if (newValue < oldValue) {
this.msg = "降温了，该加衣服了"
} else {
this.msg = "升温了，减少衣服吧"
}
let x = "温度被改变,现在的温度是：" + newValue + "，原来温度值是：" + oldValue + "温差是：" + (newValue - oldValue)
vm.msg_info = x
console.log(x)
}
})
</script>
</body>
</html>