vue中如何封装过滤器filter

在vue-cli脚手架里面的src文件下面创建一个filter文件夹，里面再创建一个index.js文件

然后在index里面写入过滤器方法

index.js：

function filterOne(n) {
	return n + 10;
}

function filterTwo(n, m) {
	return n + m + 5;
}

export { filterOne, filterTwo };

使用：

在main.js文件中：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

import * as filters from './filter/index.js';
// console.log(filters);
// 全局注册过滤器
Object.keys(filters).forEach((key) => {
	// console.log(filters[key]);
	Vue.filter(key, filters[key]);
});

Vue.config.productionTip = false;
new Vue({
	router,
	render: (h) => h(App)
}).$mount('#app');

然后就可以在全局使用过滤器了：

例如：{{test | filterOne}}

 说说Object.keys的作用：

语法：Object.keys(obj)

参数：obj，要返回其枚举自身属性的对象

返回值：一个表示给定对象的所有可枚举属性的字符串数组

描述：Object.keys 返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。

例子：

// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  } 
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']