vue 过滤器

vue过滤器的使用场景以及用法

定义：

过滤器是对 即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据

##　　　过滤器的使用场景

时间戳过滤：

export default {
    name: 'FilterDemo',
    /* 局部过滤器 */
    filters: {
      /* 格式化时间戳 */
      formatDate (val) {
        const date = new Date(val);
        const year = date.getFullYear();
        const month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
        const day = date.getDate() > 9 ? date.getDate() + 1 : `0${date.getDate() + 1}`;
        return `${year}-${month}-${day}`;
        console.log(val);
      }
    },
    data () {
      return {
 
      }
    }
    
  }

用法：

<template>
  <div>
    <h2>vue过滤器:</h2>
    <!-- 局部过滤器 -->
    <p><b>{{ 1533527037000 | formatDate }}</b></p>
    <!-- 全局过滤器 -->
    <p><b>{{ 1533527037000 | formatTime }}</b></p>
  </div>
</template>