Vue定义全局过滤器filter

介绍

多个过滤器一起添加到全局中

1. 创建方法

首先src下新建plugin文件夹，用来存放插件。

在plugin文件夹内新建filters.js，编写方法（如单位转化等等…）

// js将数字转换成万、亿、万亿  10000 == 1万
export function numberFormat(data) {
    
    
	var value = Number(data)
	let unit = '';
	var k = 10000,
		sizes = ['', '万', '亿', '万亿'],
		i;
	if (value < k) {
    
    
		value = value;
	} else {
    
    
		i = Math.floor(Math.log(value) / Math.log(k));
		value = ((value / Math.pow(k, i))).toFixed(2);
		unit = sizes[i];
	}
	return value + unit;
}

2. 添加到Vue全局中

在main.js中引入,添加

import * as filters from './plugins/filters.js'
Object.keys(filters).forEach(key=>{
    
    
    Vue.filter(key,filters[key])//插入过滤器名和对应方法
})

3.使用

使用方法有两种

a.在双花括号插值（用的较多）

{
    
    {
    
     value | numberFormat }}

b.在v-bind表达式中使用

<div v-bind:data=" value | numberFormat  "></div>