原生js结合vue实现时间过滤器

分手后的思念是犯贱 2023-07-06 13:06 19阅读 0赞

1.  实现时间过滤器需要`vue.filter`对象，自定义过滤器的名称为`dateFormat`，后面就是传入的参数，`originVal`就是传入需要的时间。
2.  通过`new Date()`方法获取传入的日期对象，然后就通过这个日期对象获取具体的年月份，以及时分秒的值，最后再返回需要的日期格式，使用时间过滤器，代码如下：

<el-table-column label="时间" prop="add_time" width="140px">
        <template slot-scope="scope">
            {
       { scope.row.add_time | dateFormat}}
        </template>
    </el-table-column>

1.  **时间过滤器**，完整代码如下：

// 引入vue
    import Vue from 'vue'
    
    // 自定义时间的过滤器
    Vue.filter('dateFormat', function(originVal) { 
      // 获取传入的日期时间
      const dt = new Date(originVal)
      // 获取传入日期的年份
      const y = dt.getFullYear()
      // 获取传入日期的月份，从0开始，加1到正常月份，加''变为字符串
      const m = (dt.getMonth() + 0 + '').padStart(2, '0')
      // 获取传入日期的日子
      const d = (dt.getDate() + '').padStart(2, '0')
    
      // 获取传入日期的小时
      const hh = (dt.getHours() + '').padStart(2, '0')
      // 获取传入日期的分钟
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      // 获取传入日期的秒数
      const ss = (dt.getSeconds() + '').padStart(2, '0')
    
      // 返回日期格式
      return `${ y}-${ m}-${ d} ${ hh}:${ mm}:${ ss}`
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关原生 vue.js 快速笔记

一、最简单的demo `Hello world` 先下载vue.js [vue官方库][vue] <!DOCTYPE html> <html> ...

电玩女神/ 2024年04月17日 23:41/ 0 赞/ 80 阅读

相关 vue使用moment.js结合filter过滤器格式化时间

先下载moment npm install moment 在需要的页面引入和使用列：返回时间是2019-8-28 12：32：08而需要显示的时间格式为"...

ゞ浴缸里的玫瑰/ 2024年04月17日 16:11/ 0 赞/ 113 阅读

相关 Vue.js过滤器filters

![666b410860d144eb91c2a90ee68baa74.gif][] 目录一、局部过滤器二、全局过滤器三、过滤器串联四、过滤器接收多个参数

╰+哭是因爲堅強的太久メ/ 2024年03月23日 16:07/ 0 赞/ 101 阅读

相关原生js结合vue实现时间过滤器

1. 实现时间过滤器需要`vue.filter`对象，自定义过滤器的名称为`dateFormat`，后面就是传入的参数，`originVal`就是传入需要的时间。 2. 通

分手后的思念是犯贱/ 2023年07月06日 13:06/ 0 赞/ 20 阅读

相关如何使用moment.js以及filter实现vue中的时间格式化过滤器

1. 第一步，下载`moment.js`，可以通过 `npm install moment --save` 命令进行下载 2. 第二步，创建 `filter` 文件，引入

Dear 丶/ 2023年06月29日 10:45/ 0 赞/ 21 阅读

相关 Vue.filter时间过滤器

Vue.filter('timer',function(str){ if(!str) return ''; let textDat

桃扇骨/ 2023年03月01日 12:58/ 0 赞/ 57 阅读

相关 Vue.js原生指令

Vue.js原生指令目录： v-text v-html v-show/v-if v-for v-bind/v-on v-model v-once ------

青旅半醒/ 2022年05月14日 10:42/ 0 赞/ 99 阅读

相关 Vue.js 过滤器

文章目录过滤器过滤器的基本使用私有过滤器全局过滤器品牌管理案例

曾经终败给现在/ 2022年03月18日 13:06/ 0 赞/ 222 阅读

相关原生js时间转换

function get_str_time(time){ var datetime = new Date(); datetime.set

秒速五厘米/ 2021年09月16日 23:38/ 0 赞/ 293 阅读

相关 Vue.js--过滤器

Vue.js支持在 \{ \{\}\} 插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通

怼烎@/ 2021年08月13日 23:47/ 0 赞/ 287 阅读