千家信息网

Vue的过滤器是什么

发表于:2026-11-01 作者:千家信息网编辑
千家信息网最后更新 2026年11月01日,这篇文章主要为大家展示了"Vue的过滤器是什么",内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下"Vue的过滤器是什么"这篇文章吧。1. 过滤器案例中使用到时间
千家信息网最后更新 2026年11月01日Vue的过滤器是什么

这篇文章主要为大家展示了"Vue的过滤器是什么",内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下"Vue的过滤器是什么"这篇文章吧。

    1. 过滤器

    案例中使用到时间格式相关API

    1.1 对过滤器的理解

    定义:对要显示的数据进行特定格式化后在显示

    适用:做一些简单的逻辑处理

    特点:滤器可以做一些简单操作,并且没有改变原来的数据,产生新的对应的数据

    1. 语法 : data | 过滤器

    不传参数默认将data值传入,并且自动调用函数,函数可接收到value

    传参数并不会覆盖掉第一个参数,第一个参数默认是value,第二个参数才是 传入的参数

    2. 滤器可以以串联的形式

    data | 过滤器 | 过滤器

    执行的顺序是将data当做参数传入到第一个过滤器中,第一个过滤器处理完,返回的

    值作为第二个过滤器的参数

    1.2 全局过滤器:

    Vue.filter(filterName, function(value){  return value.slice(0, 4);})new Vue({        .        ..        ...})

    1.3 局部过滤器:

    new Vue{        filters:{                filterName(value){      return value.slice(0, 4);                }        }}

    在html中使用过滤器

    {{ handledata | filtername }}
    {{ handledata | filtername(参数) }}

    1.4 过滤器的案例

     

    methods写的:{{time()}}

    computed写的:{{time1}}

    过滤器的写的:{{number | ftime("YYYY-MM-DD HH:mm:ss") | qjtime}}


    {{name | qjtime}}

    以上是"Vue的过滤器是什么"这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

    0