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