Hexo

前言

我们接着上一篇文章01-04来讲。

过滤器的概念

概念：Vue.js 允许我们自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值表达式、 v-bind表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。

Vue1.X中的系统过滤器

Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器。

系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了。

系统过滤器的使用，可以参考参考文档：http://v1-cn.vuejs.org/api/#过滤器

Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。我们接下来讲一讲。

自定义全局过滤器

文档地址：http://v1-cn.vuejs.org/guide/custom-filter.html

全局过滤器的基本使用

我们可以用全局方法Vue.filter()自定义一个全局过滤器。这样的话，每一个Vue的对象实例（每一个VM实例）都可以拿到这个过滤器。它接收两个参数：过滤器的名称、过滤器函数。

比如说，我要将曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人这句 msg 中的“单纯”改为“邪恶”。可以这样做：

（1）在差值表达式中这样调用：

1	<p>{{ msg \| msgFormat }</p>

上方代码的意思是说：

管道符前面的msg：要把 msg 这段文本进行过滤，
管道符后面的msgFormat：是通过msgFormat这个过滤器进行来操作。

（2）定义过滤器msgFormat：

// Vue.filter 中的第一个参数是过滤器的名称，第二个参数是具体的过滤器函数
// 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
Vue.filter('msgFormat', function (myMsg) {  // function 的第一个参数指的是管道符前面的 msg
    // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
    return myMsg.replace(/单纯/g, '邪恶')
})

上方代码解释：

Vue.filter(‘过滤器的名称’, 具体的过滤器函数)中的第一个参数指的就是过滤器的名称（必须和管道符后面的名称完全一致），第二个参数是具体的过滤器函数
过滤器函数function中，第一个参数指的管道符前面的msg。
replace()方法是用来做字符串的替换的。第一个参数如果只写成单纯，那么就会只修改 msg 中的第一个单纯字样。所以这里就用正则去匹配msg 中所有的单纯字样。

最终，完整版代码如下：