vue-filter · 前端工程化指南

## 前言对于常用的过滤器，你应该熟悉并掌握，清楚他们的用法。Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。 ## 过滤器的使用过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示： ~~~  {{ message | capitalize }}  <div v-bind:id="rawId | formatId"></div> ~~~ 备注：各个过滤器可以串行使用，前面过滤器的处理结果可以作为后面过滤器的入参。 ## vue内置的过滤器 ### 字母操作 * capitalize 首字母大写 * uppercase 字母转为大写 * lowercase 字母转为小写 ### json的过滤器可以吧表达式的值转换为json 的字符串，是json的stringify的精简版，后面可以接受一个number类型的数字，处理转换之后的字符串缩进的距离，默认为2.` | json 4` ### 限制 * limitBy number 限制开始的前面n个元素 * filterBy str in '' 可以在数组中搜索返回具有这个关键词的元素，也也可以指定某一个或者几个属性中匹配；拓展使用：可以把需要搜索的关键字列到数组里，方便统一的管理。例如： ~~~ <li v-for="item in items | filterBy name in 'name'">{{item.name}}</li> data:{ name:[ {name:111}, {name:222} ]} ~~~ * orderBy 通过某个排序字段第一个参数为string||array||function 第二个参数为可选的，表示是升序还是降序，大于等于0升序，小于0 降序，默认升序 ### currency 将数字转换为货币，第一个参数代表货币符号，默认的是美元，后面的代表保留小数，默认是两位 ~~~ {{amount | currency ￥ 2}} {{1233541 | currency ￥ 3}} ￥1，233，541.000 ~~~ ### debounce 延迟一定时间执行，接受的参数为延迟的毫秒数，一般用在输入框的监听时间，用来减少频繁的事件调用. `@keyup="onkeyup | debounce 500"` ## 自定义过滤器 ~~~ //页面中直接使用 new Vue({ // 定义自己的过滤器入参为value 返回自己需要的值 filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) // vue spa项目中使用,定义之后所有的页面可以共用 Vue.filter(filtername,function(value){ return value }) ~~~ ## 全局过滤器以及传参 ~~~ Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) ~~~ 备注：传参的部分需要自己实践下，多个参数的传递会有什么问题需要判断下。在过滤器的参数定义中，第一个参数为传入的值，第二个开始为过滤器的参数。 ## 注意事项 * 饿了么的element 的组件中prop属性注入的值不可直接使用过滤器，需要用template标签模板拿到具体的数据做处理。如果你想对里面的数据进行处理，可以当前页面定义一个format的对应的格式化的方法，或者定义vue全局的过滤器，在template中使用。 * 项目中建议根据自己的需要，是全局的过滤器还是就某个页面或者组件使用；另外需要注意的是要避免过滤器冲突，避免覆盖原有的或者其他人的过滤器。 ## 参考文档 - [官方filter定义](https://cn.vuejs.org/v2/guide/filters.html)