Vue.js框架学习—侦听属性

最新推荐文章于 2023-09-22 13:02:37 发布

数据发现者

最新推荐文章于 2023-09-22 13:02:37 发布

阅读量271

点赞数

分类专栏： Vue框架学习文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_45237668/article/details/127171271

版权

Vue框架学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

一、侦听属性watch

当被侦听的属性变化时，回调函数自动调用，进行相关操作。
监视的属性必须存在，才能进行监视。
监视的两种写法：
- (1).new Vue时传入watch配置
- (2).通过vm.$watch监视

二、侦听属性的效果

在这里插入图片描述

当点击页面中的button按钮时，调用methods方法中的函数，修改属性中的isHot的值，watch会侦听到isHot发生了变化，从而调用handler函数在控制台打印输出。

三、侦听属性的两种写法

1、Vue实例化时传入watch配置

<body>
    <div id="root">
        <span>今天的天气很{{info}}</span><br><br>
        <button @click="changeWeather">点击切换天气</button>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            isHot:'true'
        },
        computed:{
            info(){
                return this.isHot? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot=!this.isHot
            }
        },
        watch:{
            isHot:{
                handler(oldValue,newValue){
                    console.log('isHot属性修改了',oldValue,newValue)
                }
            }
        }
    })
</script>

2、通过vm.$watch

<body>
    <div id="root">
        <span>今天的天气很{{info}}</span><br><br>
        <button @click="changeWeather">点击切换天气</button>
    </div>
</body>
<script>
    const vm=new Vue({
        el:'#root',
        data:{
            isHot:'true'
        },
        computed:{
            info(){
                return this.isHot? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot=!this.isHot
            }
        },
    })
    vm.$watch('isHot',{
        handler(oldValue,newValue){
            console.log('isHot属性修改了',oldValue,newValue)
        }
    })
</script>