[JavaScript知识库]vue 过滤器格式化时间

🎄 🎄 vue 过滤器格式化时间 🎄 🎄

1. 借助插件 moment.js

   // 安装 moment.js
   npm install moment --save
   
   // main.js 全局引入
   import moment from 'moment'
   // main.js 定义全局过滤器
   // filter两个参数 第一个是函数名  第二个是时间格式化处理的函数
   Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
     return moment(dataStr).format(pattern)
   })
   // 需要格式化的时间
   <template slot-scope='scope'>
   	 {{ scope.row.add_time | dateformat('YYYY-MM-DD HH:mm:ss')}}
      {{ scope.row.add_time | dateFormat('HH:mm') }}
      {{ scope.row.add_time | dateFormat }}
   </template>
   

2. Vue.filters

   // main.js
   // 时间过滤器
   Vue.filter('dateformat', function(time) {
     const date = new Date(time)
     const year = date.getFullYear()
     const month = (date.getMonth() + 1 + '').padStart(2, '0')
     const day = (date.getDay() + '').padStart(2, '0')
     const hour = (date.getHours() + '').padStart(2, '0')
     const minute = (date.getMinutes() + '').padStart(2, '0')
     const second = (date.getSeconds() + '').padStart(2, '0')
     return `${year}-${month}-${day} ${hour}:${minute}:${second}`
   })
   // 需要格式化的时间
   <template slot-scope='scope'>
   	 {{ scope.row.add_time | dateFormat }}
   </template>