zoukankan      html  css  js  c++  java
  • Vue过滤器filter

    Vue中的过滤器 - filter

    什么是过滤器?

    顾名思义,过滤器就是就对数据进行筛选、过滤、格式化,比如时间格式化、英文大小写转换、状态转换等等。(过滤就是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰,那么过滤器则是过滤的工具)。它与methods、computed 或者 watch不同是,它不能改变原始值。

    过滤器分类:

    1、全局过滤器

    全局过滤器是通过在main.js文件创建一个 Vue.filter('过滤器的名称',该过滤器的具体实现函数) 。它的特点是作用于全部组件。

    2、组件内过滤器 

    组件内过滤器就是通过filters属性,该属性是一个对象,在该对象中可以定义多个过滤器。它的特点是只能作用于本组件内。

    注意事项:

    1、当全局过滤器和组件内过滤器重名的时候,那么最终将会以组件内过滤器为基准。

    2、当出现子父组件时,父组件和全局中分别定义了相同名称的过滤器,这是子组件引用过滤器时,将会使用全局的过滤器。

    怎么使用过滤器?

    ---------全局过滤器

    以一个例子为例,要将文本内容的字母转换为大写,使用全局过滤器该怎么做呢?

    首先,在main.js文件中自定义全局过滤器

    Vue.filter('过滤器的名称',该过滤器的具体实现函数) 

    这时回到所要用到的组件中,用双括号插值

    ---------组件过滤器

     注意:全局注册时是filter,没有s的。而组件过滤器是filters,是有s的。这要注意了,虽然你写的时候没有s不报错,但是过滤器是没有效果的。

    上面简单介绍了一下过滤器的调用,那么接下来讲解一下过滤器的参数写法

     上述代码中,message是作为参数传给filterA 函数,而filterA 函数的返回值作为参数传给filterB函数,最终结果显示是由filterB返回的。

     

     上述代码中,filterA的第一个参数是message,依次是‘arg1’,arg2

     

     上述代码表示'a'和'b'分别作为参数传给filterB

    简单的写了关于filter的笔记,部分内容来自简书的chenjieyi小姐姐。 

     

  • 相关阅读:
    [Trie][并查集]JZOJ 5822 量子纠缠
    [模拟]JZOJ 5820 非法输入
    SAM模板
    [树形DP]JZOJ 5819 大逃杀
    [MST][dij]JZOJ 5818 做运动
    [暴力]JZOJ 5817 抄代码
    [概率期望][树形DP][LCA]JZOJ 5814 树
    认证组件
    注册接口
    视图家族 & 路由组件
  • 原文地址:https://www.cnblogs.com/lovekiku123/p/11553436.html
Copyright © 2011-2022 走看看