冠县住房和城乡建设局网站,网站开发得多少钱,网站开发合同补充协议,宁波网站建设 网络服务Vue3中监听多条数据的两种使用 1.watch【使用上一章写法#xff0c;监听两个属性#xff0c;然后执行相应操作…】 2.watchEffect【相对于使用watch#xff0c;watchEffect默认页面初始加载#xff0c;有点类似加配置#xff1a;立即执行 immediate】 代码#xff1a; …Vue3中监听多条数据的两种使用 1.watch【使用上一章写法监听两个属性然后执行相应操作…】 2.watchEffect【相对于使用watchwatchEffect默认页面初始加载有点类似加配置立即执行 immediate】 代码
templatediv stylebackground-color: #eeeeee;div当前水温 {{water_wen}} 单位 / 摄氏度/divdiv当前水位 {{water_height}}单位 / 米/div/divdiv styledisplay:flex; ;button clickupdateWater_wen()修改-水温 /buttonbutton clickupdatewater_height()修改-水位/button/div
/template
script nameGreg_05/scriptscript setup langts
import {ref,watch,watchEffect} from vue;
let water_wenref(10);
let water_heightref(0);//修改
function updateWater_wen(){water_wen.value10
}
function updatewater_height(){water_height.value1
}//监听水温60度或水位20米则请求接口报警
//第一种写法使用watch去监听
// watch([water_wen,water_height],(newVal,oldVal){
// console.log(水温或水位变化了,newVal,oldVal)
// let [new_water_wen,new_water_height] newVal;
// if(new_water_wen60||new_water_height20){
// console.log(开始报警......);
// }
// })
//第二种不用告诉它监听谁它会自己去判断 ,页面初始上来即执行类似给watch配置indes立刻执行
watchEffect((){if(water_wen.value60||water_height.value20){console.log(开始报警......);}
})/scriptstyle
/style
