vue 过滤器filter（全面）

在官方文档中，是这样说明的：可被用于一些常见的文本格式化，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 "2019/10/20" + 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')

 

在news.vue组件中使用 全局过滤器：

<template>
    <div>
      <h1>{{price | filter_price}}</h1>
    </div>
</template>

<script>
export default {
    name:'news',
    data(){
        return{
            price:1200
        }
    }  
}
</script>

 

通过全局过滤器讲一个别的小知识点：当我们引用vue框架时，vue会被自动添加到window全局对象上边，而Vue正是一个构造函数，里边定义的是一些静态方法和静态属性，我们知道在ES6类中有静态方法，只有类可以调用！这样也就不难理解了，filter全局过滤器可以被Vue所调用，因为它是一个静态方法。

console.log(window);