011监视属性-watch

最新推荐文章于 2023-01-30 23:36:16 发布

Deaoyi

最新推荐文章于 2023-01-30 23:36:16 发布

阅读量48

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44592380/article/details/120860762

版权

Vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

监视属性-watch

watch:{

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 2
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        watch: {
            //里边是一个个配置项
            info: {
                //初始化时让Handler调用一下
                immediate: true,
                //当isHot发生改变时调用Handler
                handler(newValue, oldValue) {
                    //TODO
                }
            },
            numbers: {
                //vue默认是可以监视对向內部值的变化的，只是提供的watch默认不支持
                //监视多级结构中所有属性的变化,深度监视
                deep: true,
                handler(newValue, oldValue) {
                    //TODO  
                }
            }
        }
    })
</script>
</html>

当配置对象里只有handler的时候可以简写

watch:{
	info(newvalue,oldvalue){
		//TODO
	}
}

$写法

vm.$watch('info',{
	immediate:true,
	handler(newValue, oldValue){
		//TODO
	}
})

$简写(只有handler的时候可以简写)

vm.$watch('info',function(newValue, oldValue){
	//TODO
})

Deaoyi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
011监视属性-watch

监视属性-watchwatch:{}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>监视属性</title> <script type="text/javascript" src="js/vue.js"></script></head><body><div
复制链接

扫一扫