vue watch深度监听对象实现数据联动效果


Posted in Javascript onAugust 16, 2018

vue watch深度监听对象实现数据联动效果

当对象内的某一个元素发生变化,判断对象另一元素,并进行赋值

<template>
<input type="text" v-model="a.a1.a12"/>{{a.a1.a12}}

<input type="text" v-model="a.a2.a22"/>{{a.a2.a22}}
</template>
<script>

data(){


retrun{



a:{




a1:{





a12:12




},




a2:{





a22:15




}



}

},

watch:{


a:{



handler(val.oldval){




if(val.a1.a12<val.a2.a22){





val.a2.a22=val.a1.a12;




}



},



deep:true


}

}
</script>

总结

以上所述是小编给大家介绍的vue watch深度监听对象实现数据联动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
如何提高javascript加载速度
Dec 26 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
JS实现的RC4加密算法示例
Aug 16 #Javascript
vue2.0父子组件间传递数据的方法
Aug 16 #Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 #Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 #Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 #Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 #Javascript
深入理解Vue router的部分高级用法
Aug 15 #Javascript
You might like
php&amp;java(三)
2006/10/09 PHP
php SQL Injection with MySQL
2011/02/27 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
php数组指针操作详解
2017/02/14 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
Python返回真假值(True or False)小技巧
2015/04/10 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
几个SQL的面试题
2014/03/08 面试题
数据员岗位职责
2013/11/19 职场文书
我的老师教学反思
2014/05/01 职场文书
奠基仪式策划方案
2014/05/15 职场文书
河童之夏观后感
2015/06/11 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL