vue2.0 定义时间日期的全局过滤器

我们使用的时间格式化插件是：vue-moment

• 安装插件

npm  install vue-moment --save

• 在src目录的main.js下面引入vue-monent

import moment from 'moment'

• main.js里面定义全局时间过滤器

Vue.filter('time', function (value, formatString) {
  formatString = formatString || 'YYYY-MM-DD HH:mm';
  return moment(value).format(formatString);
})

• 使用只要在双花括号里面用 I time 就ok啦

<template>
  <div>
    <h1>全局过滤器</h1>
    <span>这是没有用过滤器的时间：{{ dateTime }}</span> <br/>
    <span>这是使用了过滤器的时间：{{ dateTime | time}}</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dateTime: ''
      }
    },
    mounted() {
      this.getTime()
    },
    methods:{
      getTime: function () {
      //获取当前时间戳
        this.dateTime  = Date.parse(new Date());
      }
    }
  }
</script>

效果图