watch监听数据变化

最新推荐文章于 2024-08-30 12:11:34 发布

ALSO666

最新推荐文章于 2024-08-30 12:11:34 发布

阅读量1.4k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/also666/article/details/122474582

版权

watch监听数据变化

1.最简单的监听

data() {
	return {
	  name: "张三"
	}
},
watch: {
	name: function (newValue,oldValue) {},
}

2.监听queryParams下的startTime

data() {
	return {
	  queryParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: null,
        endTime: null,
      },
	}
},
watch: {
	// 监听queryParams下的startTime
    "queryParams.startTime": {
      handler(val) {
        this.endNoTime = {
          disabledDate(time) {
            const time1 = new Date(val).getTime() - 8.64e7;
            // 结束时间禁止选择当天及以后并且不能选择开始时间之前的
            return time.getTime() < time1 || time.getTime() > Date.now()
          }
        }
      }
    },

3.监听所有queryParams数据的变化需要给定一个 deep:true

watch: {
	queryParams: {
        deep:true   // 深度检测 不论你的 queryParams 有多少层 
        //只要有一个变化 就会触发 queryParams 中的一个函数  这个函数叫 handler
        handler:function (newValue,oldValue) {
        //  handler里的this 也是指向  vue实例
        }
    },
}