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 过滤器的更多相关文章

ASP.NET Core 中文文档第四章 MVC（4.3）过滤器
原文:Filters 作者:Steve Smith 翻译:刘怡(AlexLEWIS) 校对:何镇汐 ASP.NET MVC 过滤器可在执行管道的前后特定阶段执行代码.过滤器可以配置为全局有效.仅对控 ...
ASP.NET Web API 过滤器创建、执行过程(二)
ASP.NET Web API 过滤器创建.执行过程(二) 前言前面一篇中讲解了过滤器执行之前的创建,通过实现IFilterProvider注册到当前的HttpConfiguration里的服务容器 ...
ASP.NET Web API 过滤器创建、执行过程(一)
ASP.NET Web API 过滤器创建.执行过程(一) 前言在上一篇中我们讲到控制器的执行过程系列,这个系列要搁置一段时间了,因为在控制器执行的过程中包含的信息都是要单独的用一个系列来描述的,就 ...
ABP(现代ASP.NET样板开发框架)系列之13、ABP领域层——数据过滤器（Data filters）
点这里进入ABP系列文章总目录基于DDD的现代ASP.NET开发框架--ABP系列之13.ABP领域层——数据过滤器(Data filters) ABP是“ASP.NET Boilerplate P ...
AngularJS过滤器filter-时间日期格式-渲染日期格式-$filter
今天遇到了这些问题索性就写篇文章吧话不多说直接上栗子不管任何是HTML格式还是JS格式必须要在 controller 里面写 // new Date() 获取当前时间 yyyy-MM-ddd ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（40）-精准在线人数统计实现-【过滤器+Cache】
系列目录上次的探讨没有任何结果,我浏览了大量的文章和个别系统的参考!决定用Cache来做,这可能有点难以接受但是配合mvc过滤器来做效果非常好! 由于之前的过滤器我们用过了OnActionExecu ...
Hawk 4.2 过滤器
过滤器可以在流中,过滤掉不符合条件的文档.当然也可勾选反向,此时只会留下不符合条件的文档. 空对象过滤器最为常用,需要列名,可以过滤掉所有内容为Null,或字符串全部都是空字符的情况数值范围过滤 ...
实现MVC自定义过滤器，自定义Area过滤器，自定义Controller，Action甚至是ViewData过滤器
MVC开发中几种以AOP方式实现的Filters是非常好用的,默认情况下,我们通过App_Start中的FilterConfig来实现的过滤器注册是全局的,也就是整个应用程序都会使用的,针对单独的Fi ...
自定义jinja2 过滤器
今天,我们要讲的是自定义jinja2 过滤器这个知识点,因为官方文档对此一代而过,讲得不够清楚,所以我们专门拿出来讲一下. 例子例子写了两个自定义过滤器,一个是转换字典到字符串的过滤器,一个是返回当 ...
前端MVC学习总结（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

随机推荐

2022春每日一题：Day 13
题目:后缀排序什么是后缀数组?他主要包含两个数组:sa和rk. 其中sa[i]表示将字符串后缀排序后第i小的编号,rk[i]表示后缀i的排名. 显然sa[rk[i]]=i,rk[sa[i]]=i. ...
centos8 telnet安装
1. 装包 yum -y install telnet telnet-server 2. 启服务 systemctl enable telnet.socket --now 3. 防火墙开放端口 fir ...
【云原生 · Kubernetes】部署高可用 kube-controller-manager 集群
个人名片: 因为云计算成为了监控工程师‍ 个人博客:念舒_C.ying CSDN主页️:念舒_C.ying 部署高可用 kube-controller-manager 集群 12.1 创建 kube- ...
禁用显卡自动更新(解决官办驱动和OEM驱动相冲)
起因有一天打开MC(我的世界)时候突然显示显卡不支持,想了想可能是自己捣鼓电脑的时候弄坏了,提示说版本不支持,一看自己的驱动还是上古版本,但是之前都是可以正常玩的,想着更新下驱动就行了呗,更新完&q ...
kubernetes笔记-2-基本操作
一.kubectl的基本操作语法: kubectl [command] [type] [name] [flags] 语法说明: command:对资源执行相应操作的子命令,如:get.cre ...
理解MySQL事务
事务是什么百度百科是这么定义的: 事务(Transaction),一般是指要做的或所做的事情.在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序执行单元.在关系数据库中,一个事务可以是一条 ...
tp6 requset获取参数的方式
第一种:获取全部参数的值 request()->param() 1 第二种:获取排除某些字段的值,即获取其他值 request()->except(['serverToken','logi ...
volatile关键字在并发中有哪些作用？
作者:小牛呼噜噜 | https://xiaoniuhululu.com 计算机内功.JAVA源码.职业成长.项目实战.面试相关资料等更多精彩文章在公众号「小牛呼噜噜」前言读过笔者之前的一篇文章J ...
VBA驱动SAP GUI自动化：查找页面元素FindAllByName
我们在VBA中嵌入SAP原生的[脚本录制与回放]功能生成的VBS脚本,可以实现很多自动化操作.但只有我们对SAP做了一系列动作,才会得到这些动作的脚本.然而,一旦我们需要用代码提前做一些判断,然后再决 ...
SpringMVC01:入门、请求参数绑定、自定义类型转换器、常见注解
一.介绍--三层架构和MVC 1.三层架构介绍和MVC设计模型介绍开发架构一般都是基于两种形式,一种是 C/S 架构,也就是客户端/服务器,另一种是 B/S 架构,也就是浏览器/服务器.在 Java ...

Vue18 过滤器