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关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
js实现简易聊天对话框
Aug 17 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
微信小程序实现简单文字跑马灯
May 26 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
论建造顺序的重要性
2020/03/04 星际争霸
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
PHP学习之数组值的操作
2011/04/17 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Django框架中的对象列表视图使用示例
2015/07/21 Python
Python算法应用实战之栈详解
2017/02/04 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
python re模块常见用法例举
2021/03/01 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
SQL Server面试题
2013/04/04 面试题
会计专业的自荐信
2013/12/12 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
商务经理岗位职责
2014/07/30 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
校友会致辞
2015/07/30 职场文书