1 简介

　　过滤器（filter）是输送介质管道上不可缺少的一种装置,大白话，就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。

　　Vue 允许你自定义过滤器，可被用于一些常见的文本格式化

　　ps: Vue3中已废弃filter，如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能

2 语法

2.1 过滤器注册

　　1）Vue.filter(name,callback)

　　2）new Vue(

　　　　   filters:{}

　　   )

2.2 过滤器使用

　　1）{{xxx | 过滤器1名称 |过滤器2名称}}

　　2）v-bind:属性="xxx|过滤器1名称 | 过滤器2名称"

2.3 备注

　　过滤器会默认把过滤的数据作为参数，也可以自己添加参数

　　过滤器没有改变原来的数据，而是产生新的数据

3 示例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>过滤器</title>

        <script type="text/javascript" src="/js/vue.js"></script>

        <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>

    </head>

    <body>

        <div id="root">

            <h2>时间</h2>

            <h3>当前时间戳：{{time}}</h3>

            <h3>转换后时间：{{time | timeFormater()}}</h3>

            <h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>

            <h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>

        </div>

    </body>

    <script type="text/javascript">

        Vue.config.productionTip = false

        // 全局过滤器

        Vue.filter('mySlice',function(value){

            return value.slice(0,11)

        })

        new Vue({

            el:'#root',

            data:{

                time:1626750147900,

            },

            // 局部过滤器

            filters:{

                timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){

                    return dayjs(value).format(str)

                }

            }

        })

    </script>

</html>

Vue18 过滤器的更多相关文章

  1. ASP.NET Core 中文文档 第四章 MVC（4.3）过滤器

    原文:Filters 作者:Steve Smith 翻译:刘怡(AlexLEWIS) 校对:何镇汐 ASP.NET MVC 过滤器 可在执行管道的前后特定阶段执行代码.过滤器可以配置为全局有效.仅对控 ...

  2. ASP.NET Web API 过滤器创建、执行过程(二)

    ASP.NET Web API 过滤器创建.执行过程(二) 前言 前面一篇中讲解了过滤器执行之前的创建,通过实现IFilterProvider注册到当前的HttpConfiguration里的服务容器 ...

  3. ASP.NET Web API 过滤器创建、执行过程(一)

    ASP.NET Web API 过滤器创建.执行过程(一) 前言 在上一篇中我们讲到控制器的执行过程系列,这个系列要搁置一段时间了,因为在控制器执行的过程中包含的信息都是要单独的用一个系列来描述的,就 ...

  4. ABP(现代ASP.NET样板开发框架)系列之13、ABP领域层——数据过滤器（Data filters）

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之13.ABP领域层——数据过滤器(Data filters) ABP是“ASP.NET Boilerplate P ...

  5. AngularJS过滤器filter-时间日期格式-渲染日期格式-$filter

    今天遇到了这些问题索性就 写篇文章吧 话不多说直接上栗子 不管任何是HTML格式还是JS格式必须要在  controller 里面写 // new Date() 获取当前时间 yyyy-MM-ddd ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统（40）-精准在线人数统计实现-【过滤器+Cache】

    系列目录 上次的探讨没有任何结果,我浏览了大量的文章和个别系统的参考!决定用Cache来做,这可能有点难以接受但是配合mvc过滤器来做效果非常好! 由于之前的过滤器我们用过了OnActionExecu ...

  7. Hawk 4.2 过滤器

    过滤器可以在流中,过滤掉不符合条件的文档.当然也可勾选反向,此时只会留下不符合条件的文档. 空对象过滤器 最为常用,需要列名,可以过滤掉所有内容为Null,或字符串全部都是空字符的情况 数值范围过滤 ...

  8. 实现MVC自定义过滤器，自定义Area过滤器，自定义Controller，Action甚至是ViewData过滤器

    MVC开发中几种以AOP方式实现的Filters是非常好用的,默认情况下,我们通过App_Start中的FilterConfig来实现的过滤器注册是全局的,也就是整个应用程序都会使用的,针对单独的Fi ...

  9. 自定义jinja2 过滤器

    今天,我们要讲的是自定义jinja2 过滤器这个知识点,因为官方文档对此一代而过,讲得不够清楚,所以我们专门拿出来讲一下. 例子 例子写了两个自定义过滤器,一个是转换字典到字符串的过滤器,一个是返回当 ...

  10. 前端MVC学习总结（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

随机推荐

  1. Day11.2：标签的使用

    标签的使用 当我们在嵌套语句中,例如当我们在for的嵌套循环语句中,想要终止或重新开始当前循环以外的循环的时候,单独仅靠break和continue和还不够,需要在我们想要作用的循环语句处加上一个标签 ...

  2. 7 款殿堂级的开源 CMS（内容管理系统）

    最近,有读者留言让我推荐开源 CMS.我本想直接回复 WordPress,但是转念一想我玩 WordPress 是 2010 年左右的事情了,都过去十年了,它会不会有些过时呢?有没有新的.更好玩的开源 ...

  3. 2022春每日一题：Day 17

    今天打CF去了,但是很菜,只做了三题.赛后一分钟做出了第四题,wa了,改了一下下,过了 第一题就是对应的小写字母在大写字母前出现. 第二题直接dfs. 第三题dp,f[i][j]表示以第i个数开始加了 ...

  4. 面试 考察js基础不能不会的内容（第五天）

    01.描述事件冒泡的流程 基于 DOM 树结构,事件会顺着触发元素向上冒泡 点击一个div,会一级一级向父级.爷级元素上冒泡,这个点击事件不仅能被这个div捕捉到,也能被他的父级.爷爷级-元素捕捉到 ...

  5. bugku web基础$_GET

    让我们通过url传入what的值,让其等于flag 直接构造url就得到flag了

  6. win7使用onedrive右键托盘图标中文不显示问题

    前言 win7 用的 onedrive不能在微软官网下载,用不了,所以需要下载 win7可以使用的版本. onedrive_for_win7.exe 解决问题 重启电脑解决 其他 我看贴吧说是文本放大 ...

  7. docker给已存在的容器添加或修改端口映射

    简述: 这几天研究了一下docker, 发现建立完一个容器后不能增加端口映射了,因为 docker run -p 有 -p 参数,但是 docker start 没有 -p 参数,让我很苦恼,无奈谷歌 ...

  8. 【Java SE进阶】Day09 字节流、字符流、I/O操作、属性集

    一.I/O概述 1.输入输出 输入:硬盘-->内存 输出:内存-->内存 2.流 字节流:一个字节等于8位 字符流:一个字符=2个字节 二.字节流 1.概述 以字节的方式读取/传输 可以读 ...

  9. Flask框架使用SQLAlchemy的ORM

    SQLAlchemy 1.介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之便是:将类和对象转换成SQL,然后使用 ...

  10. Qt栅格布局、ScrollArea和用户选择界面

    用户选择界面 就我们在实际开发的时候可能需要面对这样一个界面 做个demo试试看 其实我们可以分解一下这个界面 就是除了控制相关的内容,最主要的就是这个界面之上,有一个个动态的输入的控件,上面都是学生 ...