监督属性

何为监督属性：这是vue一个配置属性，主要是监督已有的属性值。

案例：实现监督天气变化，在控制台输出变化。

  
<body>
    <!-- 定义一个vue容器 -->
    <div id="root">
        <h3>广东天气很{{info}}</h3>
        <button @click="reverseWeather">切换天气</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                isHot:true
            },
            computed:{
                info(){
                    return this.isHot?'炎热':'寒冷'
                }
            },
            methods: {
                reverseWeather(){
                    this.isHot = !this.isHot
                }
            },
            // 第一种：使用配置属性  
            watch:{
                isHot:{
                    handler(newValue,oldValue){
                        console.log('isHot被修改',newValue,oldValue)
                    }
                },
                // info:{
                //     handler(newValue,oldValue){
                //         console.log('info被修改',newValue,oldValue)
                //     }
                // }
            }
        })
        // 第二种：使用api
        vm.$watch('info',{
            handler(newValue,oldValue){
                console.log('info被修改',newValue,oldValue)
            }
        })
    </script>
</body>

vue代码解释：首先天气info有两种：炎热和寒冷，data配置项使用isHot布尔值，用computer配置项实现逻辑判断；其次给按钮绑定点击事件，在methods配置项中实现反转天气；最后watch配置项用于在控制台输出每次变换前和变换后的天气；主要使用两种方式实现监督。

posted @ 2023-12-28 17:15 gdxstart 阅读(5) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 数据代理图

· 注入属性Autowire和Qualifier

· Vue之监视属性

· day59-监视属性

· vue-监视属性

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）

公告

昵称： gdxstart
园龄： 2年11个月
粉丝： 4
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

container-simple

监督属性

监督属性

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜


	<body>
	<!-- 定义一个vue容器 -->
	<div id="root">
	<h3>广东天气很{{info}}</h3>
	<button @click="reverseWeather">切换天气</button>
	</div>
	<script>
	const vm = new Vue({
	el: '#root',
	data: {
	isHot:true
	},
	computed:{
	info(){
	return this.isHot?'炎热':'寒冷'
	}
	},
	methods: {
	reverseWeather(){
	this.isHot = !this.isHot
	}
	},
	// 第一种：使用配置属性
	watch:{
	isHot:{
	handler(newValue,oldValue){
	console.log('isHot被修改',newValue,oldValue)
	}
	},
	// info:{
	// handler(newValue,oldValue){
	// console.log('info被修改',newValue,oldValue)
	// }
	// }
	}
	})
	// 第二种：使用api
	vm.$watch('info',{
	handler(newValue,oldValue){
	console.log('info被修改',newValue,oldValue)
	}
	})
	</script>
	</body>