Vue技术9.3

最新推荐文章于 2024-09-30 14:28:41 发布

yitahutu79

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量128

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40713201/article/details/126168171

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>>
<html>
    <head>
        <title>天气案例_深度监视</title>
        <meta charset="UTF-8" />
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
           深度监视：
            （1）Vue中的watch默认不检测对象内部值的变化（一层）
            （2）配置deep:true可以监测对象内部值变化（多层）
            备注：
            （1）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
            （2）使用watch时根据数据的具体结构，决定是否采用深度监视
        -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changeWeather">切换天气</button>
            <hr/>
            <h3>a的值是：{{numbers.a}}</h3>
            <button @click="numbers.a++">点我让a+1</button>
            <h3>b的值是：{{numbers.b}}</h3>
            <button @click="numbers.b++">点我让b+1</button>
        </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>