14-过滤器（Vue3 已经移除）

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

• 注册过滤器：
  • 全局过滤器：Vue.filter(name,callback)
  • 局部过滤器：new Vue{filters:{}}
• 使用过滤器：{\{ xxx | 过滤器名1 }} 或 v-bind:属性 = "xxx | 过滤器名2"
  • 示例：<div>{\{myData | filterName}}</div> 或 <div>{\{myData | filterName(arg)}}</div>

使用 dayjs 用来格式化时间

<!-- 准备好一个容器-->
<div id="root">
  <h2>显示格式化后的时间</h2>
  <!-- 计算属性实现 -->
  <h3>现在是：{{ fmtTime }}</h3>
  <!-- methods实现 -->
  <h3>现在是：{{ getFmtTime() }}</h3>
  <!-- 过滤器实现 -->
  <h3>现在是：{{time | timeFormater}}</h3>
  <!-- 过滤器实现（传参） -->
  <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
  <h3 :x="msg | mySlice">尚硅谷</h3>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false;
  //全局过滤器
  Vue.filter('mySlice',function(value){
    return value.slice(0,4)
  });

  new Vue({
    el:'#root',
    data:{
      time:1621561377603, //时间戳
      msg:'你好，尚硅谷'
    },
    computed: {
      fmtTime(){
        return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
      }
    },
    methods: {
      getFmtTime(){
        return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
      }
    },
    //局部过滤器
    filters:{
      timeFormater(value, str='YYYY年MM月DD日 HH:mm:ss'){
        // console.log('@',value)
        return dayjs(value).format(str)
      }
    }
  })
</script>

备注：

1. 过滤器也可以接收额外参数、多个过滤器也可以串联
2. 过滤器并没有改变原本的数据, 是产生新的对应的数据