vue教程(二)--过滤器和监视改动功能
过滤器filter:
1、将数据进行添油加醋的操作。
2、过滤器分两种: 组件内的过滤器(组件内有效)、 全局过滤器
组件内:filters:{过滤器名:过滤器函数fn},fn内通过return 返回最终数据。 例如 filters:{transName:function(){reteurn ''}}
全局过滤器: Vue.filter(过滤器名:过滤器函数fn);例如:Vue.filter('transName',function(arg....){return ''})
3、过滤器是先注册再使用
4、用法 {{变量|过滤器名(参数1,参数2......)}}
监听watch(单个),cumputed(监听多个)
1、用法watch(key属于data中声明的变量名,value是监视后的行为)
watch:{
myName:function(newValue,oldValue){
}
}
注:如果watch监视复杂类型的数据 比如users:[{name:''abc}], 如果按上述监听,怎么监听失败,因为对于复杂类型的数据,watch监听的是对象的地址,而不是属性的值。所以需要
深度监听。一般复杂类型 Object || array,用法如下:
watch:{
deep:true,
handler:function(newValue,oldValue){
}
}
2、cumputed(监听多个) 用法
例如 要实现 a+b = {{result}}的例子,a、b分别代表的是data里面声明的变量,a\b任何一个的变化都会影响result的输出,这时可以使用cumputed,
cumputed:{
//监听result属性
result:function(){
//监视对象,凡是写在该方法内的所有this.变量,都会被监听执行该方法。
return this.a+this.b;
}
}
git上有开发的项目作为例子,有兴趣的可以下载学习。源代码已上传git:Git地址
技术交流群:
vue教程(二)--过滤器和监视改动功能的更多相关文章
- vue教程2-06 过滤器
vue教程2-06 过滤器 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg| ...
- Vue教程:过滤器filters(五)
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...
- vue教程二 vue组件(3)
给属性传递数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- vue教程二 vue组件(2)
每个组件都可以有自己的data.methods.computed和您之前看到的所有内容—就像Vue实例本身一样. 您可能已经注意到了组件和Vue实例之间的一个细微差别:Vue实例上的数据属性是一个对象 ...
- vue教程二 vue组件(1)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script ...
- vue教程2-07 微博评论功能
vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- Vue学习之过滤器和自定义指令小结(三)
过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...
- vue教程1-07 模板和过滤器
vue教程1-07 模板和过滤器 一.模板 {{msg}} 数据更新模板变化 {{*msg}} 数据只绑定一次 {{{msg}}} HTML转意输出 <!DOCTYPE html> < ...
- PySide——Python图形化界面入门教程(二)
PySide——Python图形化界面入门教程(二) ——交互Widget和布局容器 ——Interactive Widgets and Layout Containers 翻译自:http://py ...
随机推荐
- LOG4NET图文教程
LOG4NET教程 一:简介 从操作系统到大多数的大型软件,都会有自己的程序运行时的日志跟踪API.因为一旦程序被部署以后,就不太可能再利用专门的调试工具了.然而软件开发人员需要一套强大的日志系统来记 ...
- C# 对字段忽略模型校验
1.在if (!ModelState.IsValid)之前给字段赋值,然后TryUpdateModel()2.使用如下方法 public ActionResult Create([Bind(Exclu ...
- 适配DirectFB到qt4.8.5(嵌入式Linux)
适配DirectFB到qt4.8.5 1.编译qt4.8.5 这部在qt官网上其实已经有较详细的说明,了解更多,请点击链接进入. 首先是配置选项,如下是我的配置选项: ./configure \ -p ...
- iOS登录及token的业务逻辑(没怎么用过,看各种文章总结)
http:是短连接. 服务器如何判断当前用户是否登录? // 1. 如果是即时通信类:长连接. // 如何保证服务器跟客户端保持长连接状态? // "心跳包" 用来检测用户是否在线 ...
- Hadoop初步学习
我们老板理解的大数据是,从数据到知识的转化.大数据目前的应用如 支付宝金融大数据.腾讯出行大数据等. 大数据的工作就是从海量数据源中筛选,梳理对自己有用的数据,整合成合适的数据结构,存储并进行可视化. ...
- auth-booster配置和使用(yii1.5)
auth-booster这个是一个yii框架扩展中的一个模块.是非常好用的(但是里面的说明都是英文的,所以国人用还需要改一点里面的汉化) 1.下载auth-booster这个:http://www.y ...
- Linux就该这么学---第一课 20190705
要认真学习,认真完成作业,最主要是坚持,我感觉自己坚持这个能力欠缺,要主动改正. 还想说一句,以前我是20期学员,后面没有时间学习了,现在到22期了,我要坚持学习完成,坚持 坚持 坚持!!! 现在分享 ...
- 将GMap封装为Activex供QT使用(工具:VS2017,QT5.12) 更新部署到其它电脑
由于一开始定的开发平台在QT下,到后面要加入地图控件.qt里本身带有地图qmap(在qt的官方案例中可以找到,用qml做的),但只有固定的几个地图源,要做google或者bing地图,时间和人力不允许 ...
- 从零到一,利用kubeadm在ubuntu server 16.04 64位系统离线安装kubernetes v1.10.0
说明 初步接触kubernets,记录学习过程 本教程目的利用kubeadm在ubuntu server 16.04 64位系统离线安装kubernets v1.10.0 环境信息 节点IP地址 角色 ...
- CSU 1811: Tree Intersection(线段树启发式合并||map启发式合并)
http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1811 题意:给出一棵树,每一个结点有一个颜色,然后依次删除树边,问每次删除树边之后,分开的两个 ...