Vue中watch的简单应用
时间:2022-07-28
本文章向大家介绍Vue中watch的简单应用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动。
如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项。
下面写两个demo,参考demo来了解一下
demo1
<template>
<div>
<el-input v-model="demo"></el-input>
{{value}}
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
demo: '',
value: ''
};
},
watch: {
demo(val) {
this.value = this.demo;
}
}
};
</script>
上面这个就浅显易懂了,通过watch来直接监测demo,如果demo的值变化,value的值也会跟着一起变化。
demo2
<template>
<div>
<el-input v-model="demo.name"></el-input>
{{value}}
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
demo: {
name: ''
},
value: ''
};
},
computed: {
newName() {
return this.demo.name;
}
},
watch: {
newName(val) {
this.value = val;
}
}
};
</script>
上面这个例子,如果watch监测的是一个对象的话,直接使用watch是不行的,此时我们可以借助于computed计算属性来完成。
demo3
<div id="app">
<input type="text" v-model="childrens.name" />
<input type="text" v-model="lastName" />
</div>
<script type="text/javascript">
var vm = new Vue( {
el: '#app',
data: {
childrens: {
name: '小强',
age: 20,
sex: '男'
},
tdArray:["1","2"],
lastName:"张三"
},
watch:{
childrens:{
handler:function(val,oldval){
console.log(val.name)
},
deep:true//对象内部的属性监听,也叫深度监听
},
'childrens.name':function(val,oldval){
console.log(val+"aaa")
},//键路径必须加上引号
lastName:function(val,oldval){
console.log(this.lastName)
}
},//以V-model绑定数据时使用的数据变化监测
} );
vm.$watch("lastName",function(val,oldval){
console.log(val)
})//主动调用$watch方法来进行数据监测
</script>
</body>
数组的变化,不需要深度watch。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 让终端支持https,移植OpenSSL和libcurl到嵌入式linux,遇到的问题总结
- ComplexHeatmap|根据excel表绘制突变景观图(oncoplot)
- R-plotly|甘特图(Gantt chart)- 一不小心年中了,立个flag
- XXE漏洞那些事儿(JAVA)
- Hexo 建站过程
- Tidyverse|tidyr数据重塑之gather,spread(长数据宽数据转化)
- fastjson中的jndi注入
- R|生存分析-结果整理
- 实验吧-因缺思汀的绕过
- MySQL 用户与授权管理详解
- 基本知识|R语言简单饼图的绘制
- 分享一个有趣且牛逼的漏洞
- ggplot2-annotation|画图点“精”,让图自己“解释”
- 使用curl工具调试https接口
- 让android支持https访问银联后台,测试成功