vue --》watch 深度监听的优化。
话不多说,直接上代码,注释很清楚
<template>
<div>
<input type="text" v-model="value" >
<p>{{pValue}}</p>
<input type="text" v-model="userName.name">
</div>
</template> <script>
export default {
data() {
return {
value:'111111111',
pValue:"12",
userName:{
name:"Mir.Wang"
}
}
},
watch: {
value(a,b){ //监听input值,发生变化就会触发
this.pValue = a
},
pValue(a,b){ //监听p标签得值,当input值发生变化时,设置了p标签的值,该函数就会触发
//console.log(a,b)
}, "userName.name"(a,b){ //用字符串的方法来取代深度监听deep:true,//深度监听底层一个一个得遍历,很浪费性能
console.log(a,b)
} },
}
</script>
vue --》watch 深度监听的优化。的更多相关文章
- vue watch 深度监听以及立即监听
vue watch对象可以监听数据,数据发生变化,处理函数 watch虽可以监听,但只是浅监听,只监听数据第一层或者第二层.比如对于整个对象的监听,需要用到深度监听 vm.$watch('obj',f ...
- vue watch 深度监听
watch 是vue 里非常有用的回调函数,监听数据变化,非常方便好用,但是,当监听的数据是个复杂型的数据里,里面的数据变化时普通的监听方式是监听不到的,必须使用深度监听: data() { retu ...
- vue watch深度监听对象,实现数据联动
当对象内的某一个元素发生变化,判断对象另一元素,并进行赋值 <template> <input type="text" v-model="a.a1.a1 ...
- vue 侦听器watch 之 深度监听 deep
<template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: &l ...
- Vue.js中 watch(深度监听)的最易懂的解释
<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text& ...
- Vue.js中 watch的理解以及深度监听
如代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=" ...
- 每天一点点之vue框架 watch监听变量(深度监听)
<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text& ...
- vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
- vue中如何深度监听一个对象?
大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.那 ...
随机推荐
- pandas读取Excel文件
In [7]: import pandas as pd filname = 'ch02数据导入\\student.xlsx' data = pd.read_excel(filname) data Ou ...
- uboot if_changed函数
u-boot编译过程分析 u-boot.lds: $(LDSCRIPT) prepare FORCE $(call if_changed_dep,cpp_lds) u-boot: $(u-boot-i ...
- 【LuoguP4770】[NOI2018] 你的名字
题目链接 题意简述 给定一个串 \(S\) 多组询问 , 每次给定一个串 \(T\) 和一个 区间 \([l,r]\) 求串\(T\) 有多少个本质不同的子串 满足不是 \(S[l...r]\) 的子 ...
- 【GDOI 2016 Day1】疯狂动物城
题目 分析 注意注意:码农题一道,打之前做好心理准备. 对于操作1.2,修改或查询x到y的路径,显然树链剖分. 对于操作2,我们将x到y的路径分为x到lca(x,y)和lca(x,y)到y两部分. 对 ...
- for-in语句和with语句、break和continue语句
for-in语句 for-in语句是一种精准迭代语句,可以用来枚举对象的属性,用以遍历一个对象的全部属性. for…in声明用于对数组或者对象的属性进行循环操作: for…in循环中的代码每执行一次, ...
- 使用穷举法结合numpy解决八皇后问题
一般说到八皇后问题,最先想到的就是回溯思想,而回溯思想往往是需要递归来实现的. 计算机很善长做重复的事情,所以递归正和它的胃口,而我们人脑更喜观平铺直叙的思维方式.当 我们看到递归时,总想把递归平铺展 ...
- 在asp.net 中怎样上传文件夹
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
- php 客户端调用elasticsearch接口
1.php调用elasticsearch接口[参考资料:https://www.cnblogs.com/php0916/articles/6587340.html] /data/www/syhuo.n ...
- Build安装版的UE4
在项目中自己编译的引擎分发给团队可以参考以下两个链接 http://jackknobel.com/BuildGraph/Building-an-installed-ue4/ https://docs. ...
- D - Find Integer
D - Find Integer $a^{n}+b^{n}=c^{n}$ 给定a,n求解$b,c$ 三次以上没有整数解 #include<bits/stdc++.h> using name ...