Vue技术9.3

DOCTYPE html>>
<html>
    <head>
        <title>天气案例_深度监视title>
        <meta charset="UTF-8" />
        
        <script type="text/javascript" src="../js/vue.js">script>
    head>
    <body>
        
        
        <div id="root">
            <h2>今天天气很{{info}}h2>
            <button @click="changeWeather">切换天气button>
            <hr/>
            <h3>a的值是：{{numbers.a}}h3>
            <button @click="numbers.a++">点我让a+1button>
            <h3>b的值是：{{numbers.b}}h3>
            <button @click="numbers.b++">点我让b+1button>
        div>
    body>
    <script type="text/javascript">
        Vue.config.productionTip = false
        
       const vm = new Vue({
            el:'#root',
            data:{
                isHot:true,
                numbers:{
                    a:1,
                    b:1
                }
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            watch:{
                isHot:{
                    //handler什么时候调用？当isHot发生改变时调用。
                    handler(newvalue,oldvalue){
                        console.log('isHot被修改了',newvalue,oldvalue)
                    }
                },
               /* //监视多级结构中某个属性的变化
                'numbers.a':{
                    handler(){
                        console.log('a被改变了')
                    }
                },*/
                //监视所有属性的变化
                numbers:{
                    deep:true,
                    handler(){
                        console.log('numbers被改变了')
                    }
                }
            }
        })
     
   
    script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

相关阅读:
JVM监控工具jstat使用介绍
HTML学习-----HTML开发代码构成
结构体声明与初始化
海象赋值表达式减少重复变量
ChatGPT生成量化交易策略，真好玩
java基础面试题
牛客的课程订单分析[分组统计时如何取指定行字段？]
云端golang开发，无需本地配置，能上网就能开发和运行
求一个网页设计作业——个人博客(HTML+CSS)
【算法】蓝桥杯全攻略：从语言基础到数学算法，一站式解锁竞赛技巧

原文地址：https://blog.csdn.net/qq_40713201/article/details/126168171