过滤器

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

2、语法：

（1）注册过滤器：全局过滤器：Vue.filter(name,callback) ，局部过滤器：new Vue({ filters:{} }) (这里注意是filters)

（2）使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"，实际就是将xxx的返回结果交给过滤器去处理，可以多层级，比如：

//将aaa的结果交给bbb，再将bbb的结果交给ccc处理
{{aaa | bbb | ccc }}

3、备注：

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

4、案例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>过滤器</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="./vue.js"></script>
    <!-- 引入dayjs库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
  </head>
  <body>

    <div id="root">
      <h2>时间</h2>
        <h3>当前时间戳：{{time}}</h3>
        <h3>转换后的时间：{{time | timeFormater()}}</h3>
      <h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
      <h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    //全局过滤器
    Vue.filter('mySlice',function(value){
      return value.slice(0,11)
    })
    new Vue({
      el:'#root',
      data:{
        time:1932892342342,
      },
      //局部过滤器
      filters:{
        timeFormater(value,str="YYYY年MM月DD日 HH:mm:ss"){
          return dayjs(value).format(str)
        }
      }
    })
  </script>
</html>

效果：

Vue2--过滤器（Vue3已不用）

过滤器