添加监视属性的各种简写写法

2 years ago · b76595a739
parent 3f8d0bf19f
commit b76595a739
2 changed files with 62 additions and 1 deletions
--- a/09_监视属性/3.天气案例_深度监视.html
+++ b/09_监视属性/3.天气案例_深度监视.html
@ -2,7 +2,7 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <title>2.天气案例_监视属性</title>
+    <title>3.天气案例_深度监视</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
--- a/09_监视属性/4.天气案例_监视简写.html
+++ b/09_监视属性/4.天气案例_监视简写.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>4.天气案例_监视简写</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,
+            //     deep: true,
+            //     handler(newValue, oldValue) {
+            //         console.log('isHot 被修改', newValue, oldValue)
+            //     }
+            // } ,
+            // // 简写写法
+            // isHot(newValue, oldValue) {
+            //     console.log('isHot 被修改', newValue, oldValue)
+            // }
+        }
+    })
+    // 外置完整写法
+    // vm.$watch('isHot', {
+    //     immediate: true,
+    //     deep: true,
+    //     handler(newValue, oldValue) {
+    //         console.log('isHot 被修改', newValue, oldValue)
+    //     }
+    // })
+    // 外置简写写法
+    vm.$watch('isHot', function(newValue, oldValue){
+        console.log('isHot 被修改', newValue, oldValue)
+    })
+
+</script>
+</body>
+</html>