今天给大家带来一个比较实用的东东filter,没错就是过滤器。我们在vue中经常使用的一个东东,今天就给大家介绍一个简单的封装filter
首先在src下新建一个plugins文件,在plugins文件下面新建一个filters.js
1.过滤方法
// 在该js文件中放入项目所需的所有的过滤方法并且抛出
// 转换时间戳
const formatDate = function (value) {
const date = new Date(value);
const y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? "0" + MM : MM;
let d = date.getDate();
d = d < 10 ? "0" + d : d;
let h = date.getHours();
h = h < 10 ? "0" + h : h;
let m = date.getMinutes();
m = m < 10 ? "0" + m : m;
let s = date.getSeconds();
s = s < 10 ? "0" + s : s;
return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
};
export { formatDate };
2.引入
在main.js中引入filters.js
// 此处一定要用 * 代表所有的方法全部引入
import * as custom from "@/plugins/filters";
重点来了,在将所有的方法引入后使用Object.keys(obj).forEach()方法循环给每个对象添加key
Object.keys(custom).forEach((key) => {
Vue.filter(key, custom[key]);
});
至此就完成啦。在页面中使用就可以喽。
3.使用
<p>日期: {{ item.createTime | formatDate }}</p>
Object.keys详解
是不是特别简单,如果本文对你有用,就请点个赞呗!