简述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>

结果：

简述Vue中的过滤器

双向过滤器：（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、遇到的问题

　　无

秒客网

简述Vue中的过滤器

相关文章