Vue.js每天必学之过滤器与自定义过滤器


Posted in Javascript onSeptember 07, 2016

基础

类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值:

Vue.filter('reverse', function (value) {
 return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>

过滤器函数可以接收任意数量的参数:

Vue.filter('wrap', function (value, begin, end) {
 return begin + value + end
})
<!-- 'hello' => 'before hello after' -->
<span v-text="message | wrap 'before' 'after'"></span>

双向过滤器

目前我们使用过滤器都是在把来自模型的值显示在视图之前转换它。不过也可以定义一个过滤器,在把来自视图(<input> 元素)的值写回模型之前转化它:

Vue.filter('currencyDisplay', {
 // model -> view
 // 在更新 `<input>` 元素之前格式化值
 read: function(val) {
 return '$'+val.toFixed(2)
 },
 // view -> model
 // 在写回数据之前格式化值
 write: function(val, oldVal) {
 var number = +val.replace(/[^\d.]/g, '')
 return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
 }
})

动态参数

如果过滤器参数没有用引号包起来,则它会在当前 vm 作用域内动态计算。另外,过滤器函数的 this 始终指向调用它的 vm。例如:

<input v-model="userInput">
<span>{{msg | concat userInput}}</span>
Vue.filter('concat', function (value, input) {
 // `input` === `this.userInput`
 return value + input
})

上例比较简单,也可以用表达式达到相同的结果,但是对于更复杂的逻辑——需要多于一个语句,这时需要将它放到计算属性或自定义过滤器中。

内置过滤器 filterBy 和 orderBy,根据所属 Vue 实例的当前状态,过滤/排序传入的数组。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 #Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 #Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 #Javascript
利用Angularjs实现幻灯片效果
Sep 07 #Javascript
轻松掌握JavaScript状态模式
Sep 07 #Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 #Javascript
JS实现的幻灯片切换显示效果
Sep 07 #Javascript
You might like
使用PHP维护文件系统
2006/10/09 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
PHP 错误处理机制
2015/07/06 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
可以将word转成html的js代码
2010/04/11 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Python+微信接口实现运维报警
2016/08/27 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Python学习笔记之装饰器
2020/08/06 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
详解python内置模块urllib
2020/09/09 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
幼儿园托班开学寄语
2014/01/18 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
搞笑的获奖感言
2014/08/16 职场文书
主要领导对照检查材料
2014/08/26 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
匿名检举信范文
2015/03/02 职场文书
Python基础知识之变量的详解
2021/04/14 Python
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers