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;
    }
};

<!-- 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({
  // ...
})

当全局过滤器和局部过滤器重名时，会采用局部过滤器。
 //这是字符串首字母转大写的过滤器