Vue项目中使用过滤器

为什么要使用过滤器？

​ 能够对数据进行各种过滤处理，返回需要的结果，非常的方便和快捷。

怎么使用过滤器？

​ 首先过滤器分为两类：

>- 全局过滤器
>- 局部过滤器

例如：

Vue.filter('filterDome', function(val) {
    // val 为固定的参数 即是你需要过滤的数据
    return val.split('.')
})

全局过滤器的在项目中的使用

一般我们会在在src下面建一个文件夹，用来放我们自己的定义的过滤器。

index.js中就是定位的过滤器方法，例如：

之后再入口文件main.js中引入便可以了，引入方式如下：

....
import * as filters from './filters'
.....
// 绑定全局的过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

之后的便可以使用了，例如：

<span>{{ scope.row.name |emptyColumn }}</span>

使用管道符 | 进行连接

注意：

1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

局部过滤器的使用

 // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
    el: '#app',
    data: {
        msg: 'helle world!'
    },
    methods: {},
    //局部浏览器
    filters: {
        dataFormat(val) {
            return val + 'xiaoxin!';
        }
    }
});

在文件中的使用：

<span>{{ scope.row.name | dataFormat }}</span>