RogerWorkPC
/
Vue_Demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加深度监视案例

Browse Source
mac_study
roger 2 years ago
parent 5b450a3f80
commit 3f8d0bf19f
3 changed files with 138 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      09_监视属性/1.天气案例.html
  2. 48
      09_监视属性/2.天气案例_监视属性.html
  3. 56
      09_监视属性/3.天气案例_深度监视.html

34
09_监视属性/1.天气案例.html
Unescape View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.天气案例</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<h3>今天天气很{{showInfo}}</h3>
<button @click="changeWeather">切换天气</button>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#root",
data: {
'isHot': true,
},
computed: {
showInfo() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods:{
changeWeather() {
this.isHot = !this.isHot
}
}
})
</script>
</body>
</html>

48
09_监视属性/2.天气案例_监视属性.html
Unescape View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.天气案例_监视属性</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<h3>今天天气很{{showInfo}}</h3>
<button @click="changeWeather">切换天气</button>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#root",
data: {
'isHot': true,
},
computed: {
showInfo() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
// watch: {
// isHot: {
// immediate: true,
// handler(newValue,oldValue){
// console.log('isHot 被修改', newValue, oldValue)
// }
// }
// }
})
vm.$watch('isHot', {
immediate: true,
handler(newValue, oldValue){
console.log('isHot 被修改了', newValue, oldValue)
}
})
</script>
</body>
</html>

56
09_监视属性/3.天气案例_深度监视.html
Unescape View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.天气案例_监视属性</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<h3>今天天气很{{showInfo}}</h3>
<button @click="changeWeather">切换天气</button>
<hr/>
<h3>a的值是:{{number.a}}</h3>
<button @click="number.a++">点我a+1</button>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#root",
data: {
'isHot': true,
number: {
a: 1,
b: 1,
}
},
computed: {
showInfo() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
watch: {
isHot: {
immediate: true,
handler(newValue, oldValue) {
console.log('isHot 被修改', newValue, oldValue)
}
},
'number': {
deep: true, // 深度监视开关
handler() {
console.log('number被改变！ ', this.number.a)
}
}
}
})
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save