vue.js中$watch的用法示例
2024-09-05 11:45:44
Vue.js 提供了一个方法 watch
,它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。
在实例化时为每个键调用 $watch() ;
<template>
//观察数据为字符串或数组
<input v-model="example0"/>
<input v-model="example1"/>
/当单观察数据examples2为对象时,如果键值发生变化,为了监听到数据变化,需要添加deep:true参数
<input v-model="example2.inner0"/>
</template>
<script>
export default {
data(){
return {
example0:"",
example1:"",
example2:{
inner0:1,
innner1:2
}
}
},
watch:{
example0(curVal,oldVal){
console.log(curVal,oldVal);
},
example1:'a',//值可以为methods的方法名
example2:{
//注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象
handler(curVal,oldVal){
conosle.log(curVal,oldVal)
},
deep:true
}
},
methods:{
a(curVal,oldVal){
conosle.log(curVal,oldVal)
}
}
}
</script>
最新文章
- 前端工程师技能之photoshop巧用系列第二篇——测量篇
- asp.net+nopi生成Excel遇到设置单元格值null问题
- 查找问题的利器 - Git Bisect
- datagridview中使用checkbox问题。
- Codeforces 626C Block Towers「贪心」「二分」「数学规律」
- Sql Server查询性能优化之走出索引的误区
- js方法的命名不能使用表单元素的名称或ID
- TCP粘包和半包的处理方法
- Web APi之认证
- 2016沈阳网络赛 QSC and Master
- OSS Android SDK
- SSM-Spring-15:Spring中名称自动代理生成器BeanNameAutoProxyCreator
- WPF线程中获取控件的值和给控件赋值
- jenkins 的一个BUG
- codeforces 1097 Hello 2019
- MySQL修改root密码的多种方法(转)
- Selenium Webdriver——JS处理rich text(富文本框)
- 【SSH三大框架】Hibernate基础第十一篇:对继承映射的操作
- [Leetcode Week12]Unique Paths
- BADI:LE_SHP_DELIVERY_PROC-增强在交货处理中