vue中过滤器filters的使用

2021-08-16 12:32:00 0 106

过滤器顾名思义就是需要将后端传过来的数据  “过滤”一哈显示在网页上,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>



随缘而来,乘风而去,山高海阔,自有我风采!
所属分类: Vue.js

发表留言