Vue14 监视属性简写

监视属性简写

当监视属性只有handler时,可以使用简写

html 复制代码
<!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>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				//正常写法
				/* isHot:{
					// immediate:true, //初始化时让handler调用一下
					// deep:true,//深度监视
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, */
				//简写
				/* isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} */
			}
		})

		//正常写法
		/* vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) */

		//简写
		/* vm.$watch('isHot',(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue,this)
		}) */

	</script>
</html>
相关推荐
future14122 分钟前
项目开发日记
前端·学习·c#·游戏开发
汪子熙11 分钟前
CSS 中 td:last-child a 选择器详解
前端·javascript
q5673152318 分钟前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple25 分钟前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua32 分钟前
Vue3常用指令
前端·javascript·vue.js
欧阳天风32 分钟前
录音实时上传
前端·javascript
江号软件分享36 分钟前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端
灵犀学长1 小时前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
源码云商1 小时前
基于 SpringBoot + Vue 的 IT 技术交流和分享平台的设计与实现
vue.js·spring boot·后端
江号软件分享1 小时前
轻松解决Office版本冲突问题:卸载是关键
前端