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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
Jquery性能优化详解
May 15 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 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实现WEB动态网页静态
2006/10/09 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
BootStrap表单时间选择器详解
2017/05/09 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
美的官方商城:Midea
2016/09/14 全球购物
佳能英国官方网站:Canon UK
2017/08/08 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python