简述Vue中的过滤器

1、过滤器的基本概念

• 概念：本质上是函数；
• 作用：用户输入数据后，它能够进行处理，并返回一个数据结果；（无return语句不会报错，但是这种过滤器没有丝毫意义）
• 格式：管道符（  |  ）进行连接，而管道符的作用就是：上一个命令的输出可以作为下一个命令的输入；
• 位置：只能是Mustache表达式、v-bind表达式；{{ msg | filterFuction }}       <p v-bind:id="msg | filterFuction"></p>
• 强调：在过滤器函数中，表达式的值作为第一个参数、带引号的参数会被当做字符串处理、而不带引号的参数则会被当做属性名处理，过滤器可以接受参数，参数跟在过滤器名称的后面，参数之间以逗号分隔，例如：

  {{ message  |  filterFunction（'arg1'，arg2）}}//过滤器函数中传入的参数以后面开始的参数来统计和赋值

2、过滤器种类

• 内置过滤器（Vue2.x之后没有内置过滤器，必须自己定义）
  • capitalize：将表达式中的首字母转换为大写形式；
  • uppercase：将表达式的所有字母转换为大写格式；
  • lowercase：将表达式的所有字母转换为小写格式；
  • json过滤器：相当于JSON.stringify()；
  • 限制：处理并返回过滤后的数组   处理对象：数组
    • limitBy：第一个参数是显示数据的数量，第二个参数（可选）为开始显示的数组下标，默认为2；
    • filterBy：（字符串|函数 in 过滤值）；
    • orderBy：返回排序后的数组，（字符串|数组|函数，排序方式（可选，大>=0升序，<0降序，默认为1））；
  • currency：将数字值转换为货币的形式输出（符号：默认$，小数位：默认为2）；
  • debounce过滤器：默认300ms
• 自定义过滤器
  • 语法：Vue.filter(ID，function(){ })      
  • 步骤：
    • 建立js文件
    • 在app.js文件中引入
    • 写filter函数

• • 单个参数（以值为参数）
    • 全局写法：

      import Vue from 'vue'
      Vue.filter('uppercase',function(value){
          if(value){
              return value.toUpperCase()
          }
      })

      使用：{{ data | uppercase}}   data : 'wxh'

                               结果：WXH

• • • 局部写法：（只能在当前实例中使用）

      <template>
        <div id="example">{{ data | uppercase}}</div>
      </template>
      <script>
      export default {
        name: "example",
        data() {
          return {
            data: "wxh"
          };
        },
        filters: {
          uppercase: function(value) {
            if (value) {
              return value.toUpperCase();
            }
          }
        },
        methods: {}
      };
      </script>

      使用与结果跟上边一样

• • 多参数（参数之间用  “，”  分开）Vue1.x以空格分隔
    • 写过滤器函数：

      import Vue from 'vue'
      Vue.filter('concat',function(value,prep,desc){
          if(value){
              return value + prep + desc
          }
      })

    • 在组件中使用：

      <template>
        <div id="example">{{ data | concat('是一个',describe)}}</div>
      </template>
      <script>
      export default {
        name: "example",
        data() {
          return {
            data: "wxh",
            describe : "善良的小姑娘"
          };
        },
        methods: {}
      };
      </script>

      结果：

                               

• • 双向过滤器：（Vue1.x之后被废除，因此无法实现数据的双向绑定，而我们可以采用computed里面的getter与setter方法进行数据双向绑定，但是比较繁琐）

    filters : {
        doubleFilter : {//自定义  过滤器  以及   计算属性  形式差不多
          //model--->view    将model数据输出到view层之前进行数据转化
          read : function(value){
    
          },
          //view--->model     将视图的值在写会model前进行转化
          write : function(newVal,oldVal){
    
          }
        }
      }

3、过滤器的一个小型demo

• 进行数据的格式化，让数据按照我们的规定输出，例如：将日期转化为   2019-07-15 15:11:49
• 过滤器

  import Vue from 'vue'
  
  Vue.filter('timeFormatter', function (value) {
      if (value) {
          let date = new Date(value);
          let y = date.getFullYear();
          let MM = date.getMonth() + 1;
          MM = MM < 10 ? ('0' + MM) : MM;
          let d = date.getDate();
          d = d < 10 ? ('0' + d) : d;
          let h = date.getHours();
          h = h < 10 ? ('0' + h) : h;
          let m = date.getMinutes();
          m = m < 10 ? ('0' + m) : m;
          let s = date.getSeconds();
          s = s < 10 ? ('0' + s) : s;
          return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      }
  })

  使用：

  <template>
    <div id="example">
      <p>过滤器：{{ time | timeFormatter}}</p>
    </div>
  </template>
  <script>
  export default {
    name: "example",
    data() {
      return {
       time :  new Date().getTime()
      };
    },
    methods: {}
  };
  </script>

  结果：过滤器：2019-07-15 15:13:50

• 在定时器 “ 补零 ” 方面，也可以采用es6的方法；

  import Vue from 'vue'
  
  Vue.filter('timeFormatter', function (value) {
      if (value) {
          let date = new Date(value);
          let y = date.getFullYear();
          let MM = date.getMonth() + 1;
          MM = MM.toString().padStart(2,'0');//padStart为字符串的方法  为两位数，不足时在开头补零
          let d = date.getDate();
          d = d.toString().padStart();
          let h = date.getHours();
          h = h.toString().padStart();
          let m = date.getMinutes();
          m = m.toString().padStart();
          let s = date.getSeconds();
          s = s.toString().padStart();
          return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      }
  })

4、遇到的问题

　　无