【Vue基础系列】Vue中的过滤器（filter）

一、Vue中的过滤器是什么

        过滤器（filter）是输送介质管道上不可缺少的一种装置,大白话，就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。

        定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

Vue 允许你自定义过滤器，可被用于一些常见的文本格式化

ps: Vue3中已废弃filter

二、Vue中的过滤器如何用

   vue中的过滤器可以用在两个地方：双花括号插值和 v-bind 表达式(:)，过滤器应该被添加在 JavaScript表达式的尾部，由“管道”符号指示. 

	使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"

定义filter

在双花括号中：
    {{ message | capitalize }}

在 v-bind 简写:中:
    <div :id="rawId | formatId></div>

在组件的选项中定义本地的过滤器（局部过滤器）

定义全局过滤器： 

 

注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器

         过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数

过滤器可以串联

{{message | filterA | filterB}}

  在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

过滤器是 JavaScript函数，因此可以接收参数：

{{message | fliterA('arg1',arg2)}}

         这里，filterA 被定义为接收三个参数的过滤器函数。

其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数

小结：

• 局部过滤器优先于全局过滤器被调用
• 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

<!-- 
过滤器：
	定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
	语法：
		1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
		2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
	备注：
		1.过滤器也可以接收额外参数、多个过滤器也可以串联
		2.并没有改变原本的数据, 是产生新的对应的数据
-->

三、Vue中的过滤器补充 

       过滤器分全局过滤器和局部过滤器；过滤器可以用在两个地方：双花括号插值 或 v-bind表达式。

局部过滤器：

eg：先来看看第一个小例子：

<div id="app">
    <p>电脑价格：{{price | addPriceIcon}}</p>
</div>
 
<script>
 let vm = new Vue({
    el:"#app",
    data:{
        price:200
    },
    filters:{
        //处理函数
        addPriceIcon(value){
            console.log(value)//200
            return '¥' + value
        }
    }
 })
</script>

        上边代码，需求是想把价格前面加上人民币符号（¥），模板中文本后边需要添加管道符号（ | ）作为分隔，管道符 | 后边是文本的处理函数，处理函数的第一个参数是：管道符前边的——文本内容，如果处理函数上边传递参数，则从第二个参数依次往后是传递的参数。可能有人会问：你手动加上去不就得了！如果页面有上千个价格需要添加，怎么办？几十个页面需要添加怎么办呢，手动加能累晕！所以这种通用机制很重要。

再看一个类似官方文档的例子：（把输入的英文首字母大写，如果连续输入，以空格隔开）

<div id="app">
    //输入框
    <input type="text" v-model="content" @change="changeEvent">
     //显示层，后边加一个过滤器处理函数，把英文首字母变为大写
    <h3>{{viewContent | changeCapitalLetter}}</h3>
</div>
 
<script>
 let vm = new Vue({
    el:"#app",
    data:{
        viewContent:"",
        content:""    
    },
    methods:{
        changeEvent(){
            this.viewContent = this.content;
        }
    },
    filters:{
        changeCapitalLetter(value){//value是输入框的内容，也是要显示的内容
            if(value){
                let str = value.toString();
                //获取英文，以空格分组把字符串转为数组，遍历每一项，第一项转为大写字母
                let newArr = str.split(" ").map(ele=>{
                   return ele.charAt(0).toUpperCase() + ele.slice(1)
                });
                return newArr.join(" ")  //数组转字符串 以空格输出。。。
            }
        }
    }
 })
</script>

显示：（首字母变为大写！）

全局过滤器：

全局过滤器使用：Vue.filter( filterName，( )=>{ return // 数据处理结果 } ) 

<div id="app">
    <h3>{{viewContent | addNamePrefix}}</h3>
</div>
<script>
    Vue.filter("addNamePrefix",(value)=>{
        return "my name is" + value
    })
 
    let vm = new Vue({
        el:"#app",
        data:{
            viewContent:"贾继宝" 
        }
    })
</script>

上边代码，全局过滤器，

参数一：是过滤器的名字，也就是管道符后边的处理函数；

参数二：处理函数，处理函数的参数同上。。。

（补充）在实际开发中，全局过滤器经常会被在数据（比如时间、日期的装饰）上边，通常我们会把处理函数给抽离出去，统一放在一个.js文件中，下边用代码说下

//filter.js 文件
 
let filter_price = function (val,...params){
    return "¥" + val
}
let filter_date = function (){
    return "2022/11/05" + val
}
export {filter_price,filter_date} //导出过滤函数

下边在main.js中 导入 上边 filter.js文件 ，当然你也可以在任何组件中导入 filter.js这个文件，但是对于全局过滤器来说，最好是在main.js中定义，规范些，导入的是一个对象，所以使用Object.keys（）方法，得到一个由key组成的数组，遍历数据，让key作为全局过滤器的名字，后边的是key对应的处理函数，这样在任何一个组件中都可以使用全局过滤器了：

//main.js
 
//下边是2种导入方式，推荐第一种
import * as _filter from './filters/filter'
// import {filter_price,filter_date} from './filters/filter'
 
console.log(_filter)
 
Object.keys(_filter).forEach(item=>{
  Vue.filter(item,_filter[item])
})
 
new Vue({
  router,store,
  render: h => h(App),
}).$mount('#app')