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 相关文章推荐
Javascript常考语句107条收集
Mar 09 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
JS二分查找算法详解
Nov 01 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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中jpgraph类库的使用介绍
2013/08/08 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
js模拟类继承小例子
2010/07/17 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
Python写的Socks5协议代理服务器
2014/08/06 Python
python中global与nonlocal比较
2014/11/21 Python
Python中的filter()函数的用法
2015/04/27 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
Python实现名片管理系统
2020/02/14 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
幼儿园家长会邀请函
2014/01/15 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
收款委托书范本
2014/09/11 职场文书
督导岗位职责
2015/02/04 职场文书