Vue2.X 过滤器

写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！
学习来源： Vue + Vue-Cli 快速入门教程
李南江老师各平台账号：

• 微博：极客江南
• 微信公众号：李南江
• 腾讯课堂： 李南江
• 网易云课堂：李南江

自定义全局过滤器

什么是过滤器?
过滤器和函数和计算属性一样都是用来处理数据的
但是过滤器一般用于格式化插入的文本数据

如何自定义全局过滤器
Vue.filter("过滤器名称", 过滤器处理函数):

如何使用全局过滤器
{ {msg | 过滤器名称}}
:value="msg | 过滤器名称"

过滤器注意点
1、只能在插值语法和v-bind中使用
2、过滤器可以连续使用

html代码：

<div id="app">
    <!--Vue会把name交给指定的过滤器处理之后, 再把处理之后的结果插入到指定的元素中-->
    <p>{
  {name | formartStr1 | formartStr2}}</p>
</div>

如何自定义一个全局过滤器
通过Vue.filter()
filter方法接收两个参数
第一个参数: 过滤器名称
第二个参数: 处理数据的函数
注意点: 默认情况下处理数据的函数接收一个参数, 就是当前要被处理的数据
vue代码：

Vue.filter("formartStr1", function (value) {
   
	// console.log(value);
    value = value.replace(/学院/g, "大学");
    console.log(value);
    return value;
});
Vue.filter("formartStr2", function (value) {
   
    // console.log(value);
    value = value.replace(/大学/g, "幼儿园");
    console.log(value);
    return value;
});