vue中如何使用filters过滤时间？

最新推荐文章于 2022-12-29 16:29:19 发布

原创最新推荐文章于 2022-12-29 16:29:19 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在HTML模板中利用管道符和自定义过滤器`mapTime`来格式化日期。通过在变量后添加`| mapTime`，并将`mapTime`函数定义在Vue应用的filters对象中，可以将日期转换为`年-月-日`的格式，确保日期显示的统一性和易读性。

1、首先在变量后面输入管道符 | ，再在管道符 | 后面添加mapTime（）函数（函数名随意）

 <div>{{ row.updateDate | mapTime }}</div>

2、与data、methods同级位置添加过滤器，并定义mapTime（）函数，函数参数可以接收到管道符前面的变量，对参数数据进行改造后，函数返回的字符串就会显示在Html中

 filters: {
    mapTime(date) {
      const nDate = new Date(date);
      //将不满10的数字自动补0
      const year = nDate.getFullYear().toString().padStart(2, 0);
      const month = nDate.getMonth();
      const day = nDate.getDay().toString().padStart(2, 0);
      return year + "-" + month + "-" + day;
    },
  },