vue项目中常见的 filter 过滤器总结

最新推荐文章于 2025-06-10 09:41:39 发布

渔倒到

最新推荐文章于 2025-06-10 09:41:39 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 全家桶文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_38500689/article/details/127747504

本文总结了Vue项目中常用的filter过滤器用法，包括时间戳格式化、时长转换、字典选项过滤、AccessKey处理、时区转换、数值格式化及对象键值映射等，旨在帮助开发者提升前端数据展示的效率和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用方法

import Vue from "vue";

在双花括号中：

{
  
  { message | timeFilter }}
{
  
  {message | filterA | filterB}}
{
  
  {message | fliterA('arg1',arg2)}}

在 v-bind 简写:中:

<div :id="rawId | timeFilter></div>

//时间戳转换为"yyyy-MM-dd HH:mm:ss"格式

Vue.filter("timeFilter", function (val) {
  var unixtimestamp = new Date(val);
  var year = 1900 + unixtimestamp.getYear();
  var month = "0" + (unixtimestamp.getMonth() + 1);
  var date = "0" + unixtimestamp.getDate();
  var hour = "0" + unixtimestamp.getHours();
  var minute = "0" + unixtimestamp.getMinutes();
  var second = "0" + unixtimestamp.getSeconds();
  return (
    year +
    "-" +
    month.substring(month.length - 2, month.length) +
    "-" +
    date.substring(date.length - 2, date.length) +
    " " +
    hour.substring(hour.length - 2, hour.length) +
    ":" +
    minute.substring(minute.length - 2, minute.length) +
    ":" +
    second.substring(second.length - 2, second.length)
  );
});

Vue.filter("dateTimeFormat", function (date, fmt = 'yyyy-MM-dd HH:mm:ss') { //日期时间格式化 
  if (!date) {
    return ''
  }
  if (typeof date === 'string') {
    date = date.replace('T', ' ').replace('Z', '');
    date = new Date(date.replace(/-/g