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、遇到的问题

  无

简述Vue中的过滤器的更多相关文章

  1. 黑马vue---28、vue中全局过滤器的基本使用

    黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...

  2. 简述vue中父子组件是怎样相互传递值的(基础向)

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

  3. 第二章 Vue快速入门-- 24 过滤器-Vue中全局过滤器的基本使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 简述vue中v-if和v-show的区别

    vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示,但是他们控制的原理是不同的 v-if v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除,如果删除,也就是页面中 ...

  5. Vue 中的过滤器的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue中的过滤器

    过滤器 过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应 ...

  7. Vue中全局过滤器期与局部过滤器期的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Vue中,过滤器的使用方法!

    Vue.js允许自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和v-bind表达式.过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示:(借官方的 ...

  9. 简述Vue中使用Vuex

    1.为什么要用vuex 在vue组件通信的过程中,我们通信的目的往往就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),进而更改状态.但可以看到如果我们通过最基本的方式来进行通信,一旦需 ...

随机推荐

  1. N^2取N

    序列合并 有两个长度都是N的序列A和B,在A和B中各取一个数相加可以得到N^2个和,求这N^2个和中最小的N个. 先把A B排序 然后pushA[1]+B[i](1<=i<=n)每次取出一 ...

  2. Codeforces 954 dijsktra 离散化矩阵快速幂DP 前缀和二分check

    A B C D 给你一个联通图 给定S,T 要求你加一条边使得ST的最短距离不会减少 问你有多少种方法 因为N<=1000 所以N^2枚举边数 迪杰斯特拉两次 求出Sdis 和 Tdis 如果d ...

  3. 如何保证Redis与数据库的数据一致性

    一般来说,只要你用到了缓存,不管是Redis还是memcache,就可能会涉及到数据库缓存与数据的一致性问题,这里我们以Redis为例. 我们该如何保证Redis与数据库的一致性呢? So easy: ...

  4. 第一次使用博客及Coursera课程体验

    前言: 第一天的学习目标有三个 开设博客园账户 开设Github账号 进行第一次coursera课程学习:Internet History, Technology, and Security  (网址 ...

  5. UE4从4.15移植到4.16

    如果是旧版本的工程需要移植到4.16,有几个地方需要修改: 假设RC是工程名,修改如下(三个CS文件) 类似的,插件也需要这样修改

  6. 版本基线自动化之windows

    1.背景: 目前项目维护周期过程中,制作调试版本和对外发布版本次数比较频繁,流程过于繁琐和随意,且打包制作人成为瓶颈,为了规范版本基线流程和实现全员自动化参与,拟定版本基线自动化方案. 2.目标: 版 ...

  7. android 文件读写工具类

    将可以序列化的对象通过base64编码后进行保存 但是感觉多数情况下,不需要采用这个功能,直接保存原始的json字符串,取出来之后再进行解析即可 package com.wotlab.home.mon ...

  8. 一文读懂跨平台框架 Flutter 的搭建与运行

    作者:个推iOS开发工程师 伊泽瑞尔 Flutter是Google推出的跨平台的解决方案,用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架. 之前我们为大 ...

  9. SpringBoot:初识SpringBoot

    西部开源-秦疆老师:基于SpringBoot 2.1.6 的博客教程 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! 1.SpringBo ...

  10. 《SQL Server 2012 T-SQL基础》读书笔记 - 7.进阶查询

    Chapter 7 Beyond the Fundamentals of Querying window function是什么呢?就是你SELECT出来一个结果集,然后对于每一行,你都想给它对应一个 ...