简述Vue中的过滤器

1、过滤器的基本概念

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

  {{ 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(){ })

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

      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) {
            return value.toUpperCase()
          }
        },
        methods: {}
      };
      </script>

      View Code

      使用与结果跟上边一样

• • 多参数（参数之间用  “空格”  分开）

3、遇到的问题

简述Vue中的过滤器

原文：https://www.cnblogs.com/wxh0929/p/11188044.html