day2-过滤器

Vue中允许自己定义过滤器，被用于一些常见的文本格式化。过滤器被用在两个地方：

• 双花括号插值{{}}
• v-bind表达式

例：定义一个事件格式化过滤器

<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
<div id="app">
    <h4>显示格式化的日期时间</h4>
    <p>开始时间：{{time}}</p>
    <p>开始时间：{{time | formatTime}}</p>
</div>
<script>
    Vue.filter('formatTime', function (value) {
      return moment(value).format('YYYY-MM-DD hh:mm:ss')
    })
    
    const vm = new Vue({
      el: '#app',
      data: {
        time: new Date() - 1000
      }
    })
</script>

上面定义的全局过滤器，通过Vue.filter（‘名字’，function（）{}），全局下使用过滤器是单数filter。而过滤器可以放在vm配置里面去定义，在这里定义时一般是使用filters。

这里格式化时间使用的是moment.js。在script头部引入下面：

<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>

补充说明----关于new Date()日期格式的处理问题：

JS中想要获取当前毫秒时间戳有以下三种方法：

1. Date.parse(new Date()); //不推荐
2. ( new Date() ).valueOf()； //推荐
3. new Date().getTime(); //推荐（最常使用）