4. 监视属性watch

最新推荐文章于 2024-08-27 16:58:03 发布

心平气荷.

最新推荐文章于 2024-08-27 16:58:03 发布

阅读量58

点赞数

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

本文链接：https://blog.csdn.net/qq_53306713/article/details/130613821

版权

Vue2 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

监视属性watch :

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监视属性watch</title>
  <script src="./js/vue.js"></script>
</head>
<!-- 监视属性watch :
1.当被i按时的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
（1）new Vue时传入watch配置
（2）通过vm.$watch监视 -->

<body>
  <!-- 准备好一个容器 -->
  <div id="app">
    <h2>今天天气{{info}}</h2>
    <!-- <button @click="isHot = !isHot">切换天气</button> -->
    <button @click="changeWeather">切换天气</button>
  </div>
</body>
<script>
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#app',
    data: {
      isHot: true
    },
    computed: {
      info() {
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
      changeWeather() {
        this.isHot = !this.isHot;
      }
    },
    // 方式一：
    /*  watch: {
       isHot: {
         immediate: true,//初始化时让handler调用一下
         //handler当isHot发生变化时被调用
         handler(newValue, oldValue) {
           console.log('ishot', newValue, oldValue)
         }
       }
     }, */
  })
  // 方式二：
  vm.$watch('isHot', {
    immediate: true,//初始化时让handler调用一下
    //handler当isHot发生变化时被调用
    handler(newValue, oldValue) {
      console.log('ishot', newValue, oldValue)
    }
  })
</script>

</html>

心平气荷.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
4. 监视属性watch

immediate: true,//初始化时让handler调用一下。//handler当isHot发生变化时被调用。//handler当isHot发生变化时被调用。//初始化时让handler调用一下。
复制链接

扫一扫