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

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>