Vue中Filter声明方式

1.全局过滤器   

// filter.js
   
export function dataFilter(val) {
    console.log("全局过滤",val)
} 

// main.js  需要在main.js中引入过滤器函数

import Vue from 'vue'; // 引入Vue
import filters from './filter.js';// 引入过滤器路径

Object.keys(filters).forEach( key => {
    Vue.filter(key, filters[key]);
})

2.本地过滤器

// filters.js

export default {
    filters: {
        dataFilter(val) {
            console.log('本地过滤器',val)
        }
    }
}

Vue中methods中使用Filter

1.访问全局过滤器

<template>
    <div>
        <span>过滤:{{size | dataFilter}}</span>
        <button @click="transformation">调用全局过滤器</button>
    </div>
</template>
<script>
    
    import Vue from 'vue';

    export default {
        methods: {
            // 使用过滤的方法
            transformation() {
                // 使用Vue.filter('过滤器名称') 方式获取全局中要使用的过滤器
                let temp = Vue.filter('dataFilter');

                temp('size'); // 对size进行数据过滤
            }
        }
    }

</script>

2.访问本地过滤器

<template>
    <div>
        <span>过滤:{{size | dataFilter}}</span>
        <button @click="transformation">调用本地过滤器</button>
    </div>
</template>
<script>

    export default {

        filters: {
            dataFilter(val) {
                console.log('本地过滤器',val)
            }
        },
        methods: {
            // 使用过滤的方法
            transformation() {
                // 使用this.$options.filters[]方式获取（本地/全局）过滤器
                let temp = this.$options.filters['dataFilter'];

                temp('size'); // 对size进行数据过滤
            }
        }
    }

</script>