Vue.js每天必学之过滤器与自定义过滤器
更新时间：2016年09月07日 11:10:53 作者：i10630226
Vue.js每天必学之过滤器与自定义过滤器,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基础
类似于自定义指令，可以用全局方法 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组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 如何绑定disabled属性让其不能被点击，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue+axios 实现http拦截及路由拦截 ,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
最近火爆全网的羊了个羊小程序，背景是根据官方介绍，“羊了个羊”是一款闯关消除小游戏，通关率不到0.1%。主要玩法为重叠的各类方块，需要在下方7个栏内完成消除，其特点就是“极难”，也因此成为热门挑战，对vue3版本网页小游戏设计思路感兴趣的朋友跟随小编一起看看吧2022-12-12
这篇文章主要介绍了使用vue-cli打包过程中的步骤以及问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要为大家介绍了vue如何实现网页截图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
Volar 与vetur相同,volar是一个针对vue的vscode插件,下面这篇文章主要给大家介绍了关于Vue3格式化Volar报错的原因分析与解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了Vue Cli 3项目 使用融云IM实现聊天功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
原生JS实现Vue transition fade过渡动画效果示例
这篇文章主要为大家介绍了原生JS实现Vue transition fade过渡动画效果示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
vue加载动画element ui V-loading属性的踩坑记录
这篇文章主要介绍了vue加载动画element ui V-loading属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue项目base64转img方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论