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深度监听对象实现数据联动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
vue1.0和vue2.0的watch监听事件写法详解
如下所示: watch: { aaa: { handler: function (newVal,oldVal) { console.log('当前的值:'+ newVal); console.log('旧的值' + oldVal); }, deep: true //深度监听 } } 以上这篇vue1.0和vue2.0的watch监听事件写法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
vue中的watch监听数据变化及watch中各属性的详解
首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep
-
Vue2 监听属性改变watch的实例代码
效果: 代码: <div id="app2"> <label>幼儿园入学年龄(3-6):</label><input type="number" v-model="child.age"> <button @click="older"> + </button> <button @click="younger"> - </
-
Vue数据监听方法watch的使用
watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来 当Vue视图中的数据变化时, 关联的函数会被执行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>监听方法watch的使用</title> <script src="https://cdn.bootcss.com/
-
Vue开发之watch监听数组、对象、变量操作分析
本文实例讲述了Vue开发之watch监听数组.对象.变量操作.分享给大家供大家参考,具体如下: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } } 2.数组的watch:深拷贝 data() { return { winChips: new Array(11).fill(0) } }, watch: { winCh
-
vue.js使用watch监听路由变化的方法
watch除了可以监听数据的变化,路由的变化也能被其监听到 效果如下: 具体代码 当路由发生变化后,在watch中写具体的业务逻辑 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': function (newVal, oldVal) { if (newVal === '/login') { console.log('欢迎进入登录页面'); } if (newVal === '/registe
-
实例详解vue.js浅度监听和深度监听及watch用法
第一个浅度监听: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id=&quo
-
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
本文实例讲述了vue自定义键盘信息.监听数据变化的方法.分享给大家供大家参考,具体如下: @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCodes.ctrl=17; Vue.directive('on').keyCodes.myenter=13; @keydown.a/b/c.... <input type="text" @keydown.c="show&quo
-
vue watch关于对象内的属性监听
vue可以通过watch监听data内数据的变化.通常写法是: data: { a: 100 }, watch: { a(newval, oldVal) { // 做点什么... console.log(newval, oldVal) } } vue监听整个对象,如下: •deep: true 深度监测 data: { return { msg: { name: 'hahah', color: 'red' } } } watch: { msg: { handler(newValue, oldVa
-
vue watch监听对象及对应值的变化详解
如下所示: var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的 }, deep:true }
-
vue计算属性computed、事件、监听器watch的使用讲解
一.计算属性(computed) <template> <div class="box"> <h1>计算属性</h1> <hr> <!-- 直接渲染得到数据 --> <p><input type="text" v-model="message"></p> <!-- 对data的数据进行简单的操作 这样有一个不好的地方就是后期对页面数据
随机推荐
- Sublime Text新建.vue模板并高亮(图文教程)
- dw(dreamweaver)正则表达式函数列表
- RPC、RMI、SOAP的区别详解
- 给MongoDB添加用户权限方法分享
- zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
- JavaScript数据结构之二叉树的删除算法示例
- javascript搜索框效果实现方法
- jQuery Password Validation密码验证
- php中addslashes函数与sql防注入
- smarty模板引擎中自定义函数的方法
- yii框架表单模型使用及以数组形式提交表单数据示例
- Python每天必学之bytes字节
- Tensorflow简单验证码识别应用
- C++实现简单的职工信息管理系统
- php数组函数序列之sort() 对数组的元素值进行升序排序
- js设置文本框中焦点位置在最后的示例代码(简单实用)
- jQuery使用数组编写图片无缝向左滚动
- JS中setInterval、setTimeout不能传递带参数的函数的解决方案
- Android实现图片的高斯模糊(两种方式)
- 学习在一台新电脑上配置JAVA开发环境