因为最近写了微信小程序和百度小程序，用到了过滤器，感觉还挺好用的，所以就来总结一下，希望能帮到你们。
1. 微信小程序过滤器：
1.1：首先建一个单独的wxs后缀的文件，一般放在utils文件夹里面。这里我命名为imgFilter.wxs(因为我项目里是用来处理图片的，哈哈)
1.2：写代码，为了方便理解，下面是一个简单的返回一个字符串拼接，当然里面的函数你想怎么处理都行，这里主要介绍思路和基本实现。
var bar = function (x) {
return 'hello'+ x;
}
module.exports = {
bar: bar,
//这里的第一个bar是你要输出的名字，第二个bar是上面那个函数，写一样的就不要考虑这么多
};
1.3：定义好后就可以用了，在你需要使用的 .wxml页面引入并使用：
引入：
<wxs src="../../utils/imgFilter.wxs" module="tools" /> //要声明module等于一个你自己定义的名字，我这里写tools 使用：
<view>{{tools.bar('world')}}</view> //会显示 hello world <view>{{tools.bar(item)}}</view> //用在变量中
2. 百度小程序过滤器：
百度的和微信差不多，只是写法有点不一样.
// filter.js （百度的是js文件而不是wxs）
export default {
bar: (x) => {
return 'hello' + x;
}
}; <!-- swan模版 -->
<filter src="./filter.js" module="swan"></filter> <view>{{swan.bar('world')}}</view>
页面输出： hello world
<view>{{swan.bar(item)}}</view> //使用变量
3. vue过滤器：
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 -->
{{ message | capitalize }} <!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div> 你可以在一个组件的选项中定义本地的过滤器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
} 或者在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
在需要的组件中引入：import "../../utils/filters";
new Vue({
// ...
})
当全局过滤器和局部过滤器重名时，会采用局部过滤器。
//这是字符串首字母转大写的过滤器