vue中过滤器filters的使用

过滤器顾名思义就是需要将后端传过来的数据  “过滤”一哈显示在网页上，Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化

局部过滤器：

局部过滤器只能在当前vue文件里面使用；

<template>
    {{ message | capitalize }}
</template>
<script>
export default {
    data() {
        return {
            message: 'john'
        };
    },
    filters: {
        capitalize(val) {
            if (!val) return '';
            val = val.toString();
            return val.charAt(0).toUpperCase() + val.slice(1);
        },
    },
};
</script>

全局过滤器

1、在src目录下创建filters文件，用来存放过滤器方法，也可以引入utils其他工具方法里面的进行导入

// 引用工具方法里面的函数使用过滤器
export { dateFormat, floatFormat, renderSize } from './utils.js';
/**
 * 首字母大写
 */
export const capitalize = (val) => {
    if (!val) return '';
    val = val.toString();
    return val.charAt(0).toUpperCase() + val.slice(1);
};

2、在main.js中引入,添加到全局

import * as filters from '@/utils/filters';
Object.keys(filters).forEach((key) => {
    Vue.filter(key, filters[key]);
});

3、使用

<template>
    {{ money | floatFormat(2, '￥', true) }}
</template>