vue过滤器微信小程序过滤器和百度智能小程序过滤器

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

因为最近写了微信小程序和百度小程序，用到了过滤器，感觉还挺好用的，所以就来总结一下，希望能帮到你们。

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;
}
};
<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 }}
<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({
// ...
})当全局过滤器和局部过滤器重名时，会采用局部过滤器。
//这是字符串首字母转大写的过滤器