vue2.0中watch用法
watch:
观测Vue实例上的数据变动,对应一个对象,
键:就是需要监测的那个东西,
值:
1.可以是当键变化时执行的函数,有两个参数,第一个是变化前的值,第二个是变化后的值。
2.可以是函数名,得用单引号包裹。
3.可以是一个对象,这个对象有三个选项:
(1)handler :一个回调函数,监听到变化时应该执行的函数。
(2)deep :boolean值,是否深度监听。(一般监听时是不能监听到对象属性值的变化的,数组的变化可以听到)
(3)immediate :boolean值,是否立即执行handler函数。
watch的三种情况:
1. 普通的watch:
el:'#app',
data:{
meter:1000,
kilameter:1
},
watch:{
meter:function(val){
this.kilameter = val * 0.1;
},
kilameter:function(val){
this.meter = val *1000;
}
}
})
2.数组的watch:
el:'#app',
data:{
arr:[1,2,3]
},
watch:{
arr:function(oldV,newV){
console.log(oldV);
console.log(newV);
}
}
})
3.对象的watch:
el:'#app',
data:{
obj : {
a:111,
b:222
}
},
watch:{
obj:{
handler:function(oldV,newV){
console.log(oldV);
},
deep:true
}
}
)
vue2.0中watch用法的更多相关文章
- UICollectionView在Swift3.0中的用法
UICollectionView在Swift3.0中的用法 UICollectionView的初始化跟OC中是相似的,创建 GameView 集成自 UICollectionView .注意不同于UI ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- router-view在vue2.0中不显示,解决方法
学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...
- vue2.0中使用pug(jade)
第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写 ...
- vue2.0中使用less
第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...
- vue2.0中使用sass
第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...
- vue2.0 中#$emit,$on的使用详解
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...
- Vue2.0中v-for迭代语法变化(key、index)【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
- Vue2.0中的路由配置
Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...
- vue2.0中,由于页面完成之后dom还未加载完成如何进行操作
再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...
随机推荐
- 使用 Docker 部署 Next Terminal 轻量级堡垒机
1)Next Terminal 介绍 官网:https://next-terminal.typesafe.cn/ GitHub:https://github.com/dushixiang/next-t ...
- 2023山东省“技能兴鲁”职业技能大赛-学生组初赛wp
PWN pwn1 c++ pwn,cin 直接相当于 gets 了,程序有后门,保护基本没开,在 change 的最后一个输入点改掉返回地址为后门地址即可 from pwn import * cont ...
- 线上机器 swap 过高导致告警
哈喽大家好,我是咸鱼. 今天收到了一个告警,说有台服务器上的 swap 过高,已经用了 50% 以上了. 登录机器查看一下内存以及 swap 的使用情况. [root@localhost ~]# fr ...
- 【深度学习】神经网络正则化方法之Dropout
前言 正则化是一种广泛用于机器学习和深度学习的手段,它的目的就是阻碍模型过度学习(过拟合),从而提升算法的泛化能力. Dropout 是一种常见的缓解过拟合的方法.接下来,本文将从原理和实践来介绍Dr ...
- TornadoFx中的css美化
原文地址:TornadoFx中的css美化 - Stars-One的杂货小窝 TornadoFx中使用类重新对css进行了封装,所以可以用代码的形式来书写样式 说明 除了Text,其他的若是要修改文字 ...
- Nodejs 命令行调用 exec 与 spawn 差异--- 解决 spawn yarn ENOENT error
Nodejs 命令行调用 exec 与 spawn 差异 比如在前端工程项目中 Nodejs 要调用命令行命令如: yarn electron:build exec 调用 yarn 命令,为了能使命令 ...
- uniapp使用uview报错Cannot find module ‘@/uni_modules/uview-ui/components
参考:https://github.com/umicro/uView 记录使用uniapp报的错 注意uview目前只支持vue2 按照教程引入uview,然后执行的时候还是会报Cannot find ...
- 记一次由虚假唤醒产生的bug
记一次由虚假唤醒产生的bug 用int a代表产品数量最少0最多10,有两个生产者,三个消费者,用多线程和条件变量模拟生产消费过程: #include <sys/types.h> #inc ...
- 移植openssh-7.5p1(包括openssl-1.0.2l、zlib-1.2.11)到HISI3520d(编译篇)
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- Shell 编写摘要 (一)
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...