[简化 Vue.js 应用开发] 分享一个常用 Vue.js 自定义过滤器合集，适合开发 Dashboard 后台管理类应用

[Kamato]

Vue-Filters-Kit

整合常用的 Vue.js custom filters ，帮助你快速格式化时间、小数等数据，适合开发 Dashboard 后台管理类应用。

GitHub: https://github.com/panteng/vue-filters-kit

示例: http://panteng.me/demos/vue-filters-kit

写在后面

这个项目的诞生的原因是，最近这一年我用 Vue.js 写了很多后台管理类的网站，这种网站会涉及很多数据格式化相关的工作。通常我会使用 Vue 过滤器实现数据格式化。因此我打算将一些常用的自定义过滤器整合起来，做成一个库，以后在写新项目时直接拿来用就好，不需要再从头编写。

目前整合了我自己在 Vue.js 应用中常用的过滤器，包括 booleanFormatter （格式化布尔值）， byteFormatter （将 Byte 值转换为 kb 、 mb 、 gb 或 tb ）， percentageFormatter （将小数转化为百分数）和 timestampFormatter （将时间戳转换为时间）。我将陆续增加更多的自定义过滤器。

欢迎提 bug 和建议。如果你有其他常用的过滤器想补充，也欢迎 pull request 。总之是希望把一些常用的过滤器整合在一起，随取随用，以减少 Vue.js 应用的开发成本。

[loading]

正在上手 vue.js ，十分感谢。

[Kamato]

@loading 感谢支持～

[shellcodecow]

github 上面看到的，已 star

[Kamato]

@shellcodecow 谢谢～

[airyland]

时间戳转换直接依赖了 moment ，这个依赖有点大。
看 LZ 骨骼精奇，看有没有兴趣来帮忙完善一个 vue UI 的项目: https://github.com/airyland/vux

[Kamato]

@airyland 哈，这些 filters 主要是用来开发 Dashboard 类应用的。对于这种应用来说，引用个 moment.js 不算过分，而且很多其他地方都会用到 moment.js ，比如 echarts 图表的时间格式化，所以可以接受。你的项目看起来很赞，容我了解一下，时间充足的话我会尽我所能帮忙的～

[NemoAlex]

感觉
{{ isActive | booleanFormatter 'Yes' 'No' }}
这样的写法，并没有比
{{ isActive ? 'Yes' : 'No' }}
更简练啊，不明白有什么意义

[Kamato]

@NemoAlex 恩～ 确实更简练。但是我更倾向于把数据格式化的操作用 filter 的形式封装起来，出于 2 点考虑：

1. 保持代码风格一致。凡是涉及数据格式化的操作，都用 filters 来完成。就像 percentageFormatter 也可以用{{ (decimal*100).toFixed(2) }} 代替一样。但我个人不喜欢。

2. 便于统一维护和增加自定义操作。{{ isActive | booleanFormatter 'Yes' 'No' }} 和 {{ isActive ? 'Yes' : 'No' }} 其实并不完全相同。 booleanFormatter 要求 isActive 必须是一个显式的 true 或 false 值，如果 isActive 的值是 null 或 underfined 或空字符串，则返回的结果不是'No'，而是一个横线'-'。其他三个过滤器我也做了类似的操作。因为我不想把空值或未定义的值当作 false 和 0 来处理，在很多情况下这代表后台传过来的数据有问题。