简述Vue中的过滤器

Z时代
2024-01-10
分类：综合

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>

View Code

使用与结果跟上边一样

多参数（参数之间用 “，” 分开）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;
    }
})

View Code

使用：

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

View Code

结果：过滤器：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;
    }
})

View Code

4、遇到的问题

　　无

以上是简述Vue中的过滤器的全部内容，来源链接： utcz.com/z/379251.html

简述Vue中的过滤器

其他人也看了：