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实现右键弹出菜单
这篇文章主要为大家详细介绍了vue实现右键弹出菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
这篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
详解如何在vue项目中使用layui框架及采坑
这篇文章主要介绍了vue使用layui框架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue3如何获取proxy对象的值而不是引用的方式
这篇文章主要介绍了Vue3如何获取proxy对象的值而不是引用的方式,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-10-10
vue echarts实现柱状图动态展示
这篇文章主要为大家详细介绍了vue echarts实现柱状图动态展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
详解Vue的异步更新实现原理
这篇文章主要介绍了Vue的异步更新实现原理，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-12-12
Vue发布项目实例讲解
在本篇文章里小编给各位分享的是关于Vue发布项目的实例内容以及知识点讲解，需要的朋友们参考下。
2019-07-07
vue实现二级弹框案例
这篇文章主要为大家详细介绍了vue实现二级弹框案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
Vue自定义部分页面显示导航栏功能
这篇文章主要介绍了Vue自定义部分页面显示导航栏,在设计导航栏的时候，考虑到登录之前不能浏览该网站，所以需要在登录页和注册页不能出现导航栏，登录后的页面才能出现导航栏，本文给大家解决这个问题，感兴趣的朋友跟随小编一起看看吧
2022-10-10
Vue之封装公用变量以及实现方式
这篇文章主要介绍了Vue之封装公用变量以及实现方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07