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. 基于numpy的绘图

    import numpy as np #import matplotlib.pyplot as plt dataset = np.loadtxt('1.csv', delimiter=",& ...

  2. PHP常用采集函数总结

    1.获取所有链接内容和地址 function getAllURL($code){ preg_match_all('/<as+href=["|']?([^>"']+)[& ...

  3. shell安装mysql,连接数据库,创建数据库

    https://blog.csdn.net/yhflyl/article/details/83061126 https://blog.csdn.net/wyl9527/article/details/ ...

  4. java代码实现H5页面

    public void getH5(HttpServletResponse response){ StringBuffer res=new StringBuffer(); res.append(&qu ...

  5. java:集合输出之Iterator和ListIterator二

    java:集合输出之Iterator和ListIterator二 ListIterator是Iterator的子接口,Iterator的最大特点是,能向前,或向后迭代.如果现在要想双向输出的话,则只能 ...

  6. CSS3——制作正在加载页面loading...

    今天做了好多小东西,还挺开心的~ <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. linux运维、架构之路-Kickstart无人值守

    一.PXE介绍          PXE全名Pre-boot Execution Environment,预启动执行环境:通过网络接口启动计算机,不依赖本地存储设备或本地已安装的操作系统:Client ...

  8. 五年双十一:SLS数据管道发展之路

    日志服务SLS是一款飞天团队自研产品,服务云上云下3W+客户,并在阿里经济体中作为日志数据的基础设施,在过去几年中经历多次双十一.双十二.新春红包锤炼.在2019双十一中: 服务阿里经济体3W+ 应用 ...

  9. 【bzoj2073】【[POI2004]PRZ】位运算枚举子集的特技

    (上不了p站我要死了) Description 一只队伍在爬山时碰到了雪崩,他们在逃跑时遇到了一座桥,他们要尽快的过桥. 桥已经很旧了, 所以它不能承受太重的东西. 任何时候队伍在桥上的人都不能超过一 ...

  10. HDU-6709 Fishing Master

    Description Heard that eom is a fishing MASTER, you want to acknowledge him as your mentor. As every ...