vue过滤器中使用moment.js初始化时间戳

1. vue项目中下载moment依赖

npm install moment --save

2. main.js引入moment，过滤器中定义初始化日期方法

import moment from 'moment'
// 全局定义一个初始化日期的方法
Vue.filter('dateFormat', originVal => {
  return moment(parseInt(originVal) * 1000).format('YYYY MM DD')
})

3.vue文件中使用该方法

<span class="time">{{ yourTime(时间戳) | dateFormat }}</span>

补充： 过滤器可以多层使用。上一次过滤的结果作下一次过滤的第一个参数.下方小例子(局部过滤)

//视图
<h1>{{msg | uppercase | slice(2, 10)}}</h1>
//逻辑
let app = new Vue({
    // 绑定视图
    el: '#app',
    // 绑定数据
    data: {
        msg: 'abc_def-Ghi_jkm',
    },
    // 局部过滤器
    filters: {
        uppercase(str) {
            // console.log(this, arguments)
            return str.toUpperCase();
        },
        // args即(2, 10)
        slice(str, ...args) {
            return str.slice(...args);
        }
    }
})

自己实现

注：padstart，字符串方法。
第一个参数指定目标位数
第二个参数指定在字符串前添加的字符
在下边代码中，在不足两位的数字前补'0'。如6补为'06'

Vue.filter('dateFormat', originVal => {
  const dt = new Date(originVal * 1000 )
  const y = (dt.getFullYear() + '')
  const m = (dt.getMonth() + 1 + '').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还有一个巧妙方法
function padLeftZero(str) {
  return  ('00' + str).substr(str.length)
}