vue学习笔记（17）——监视属性

最新推荐文章于 2024-07-10 17:12:51 发布

weixin_54763080

最新推荐文章于 2024-07-10 17:12:51 发布

阅读量44

点赞数

分类专栏： vue学习笔记文章标签： vue.js 学习 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_54763080/article/details/128839829

版权

vue学习笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

监视属性watch

当监视属性变化时，回调函数自动调用，进行相关操作

监视属性必须存在，才能进行监视

监视的两种写法：

new.Vue时传入watch配置

通过vm.$watch监视

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>天气案例_监视属性</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
 <h2>今天天气很{{info}}</h2>
 <button @click="changeweather">切换天气</button>
</div>
 
<script type="text/javascript">
Vue.config.productionTip=false


const vm=new Vue({
    el:'#root',
    data:{
        ishot:true
    },
    computed:{
        info(){
            return this.ishot?'hot':'cool'
        }
    },
    methods:{
        changeweather(){
            this.ishot=!this.ishot
        }
    },

    // watch:{
    //     // 计算属性也可以被监视
    //     info:{
    //         immediate:true,//初始化的让handler调用一下
    //         // handler当ishot发生改变时调用
    //         handler(newValue,oldValue){
    //             console.log('ishot被调用了',newValue,oldValue)
    //         }
    //     }
    // }
})
 vm.$watch('ishot',{
    //要传一个配置对象,而且ishot要加引号
    immediate:true,//初始化的让handler调用一下
      // handler当ishot发生改变时调用
    handler(newValue,oldValue){
     console.log('ishot被调用了',newValue,oldValue)
    }
 })
</script>
</body>
</html>