Vue18 过滤器
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 ...
随机推荐
- 【题解】CF631B Print Check
题面传送门 解决思路: 首先考虑到,一个点最终的情况只有三种可能:不被染色,被行染色,被列染色. 若一个点同时被行.列染色多次,显示出的是最后一次被染色的结果.所以我们可以使用结构体,对每一行.每一列 ...
- 【题解】CF919D Substring
题面传送门 解决思路: DP 与拓扑结合.\(f_{i,j}\) 表示到 \(i\) 位置 \(j\) 的最大次数. 将 \(a \sim z\) 转成数字 \(0\sim 25\) ,方便存储. 考 ...
- Perl引用
引用就是C语言中的指针,perl引用是一个标量类型可以指向变量.数组.哈希表(也叫关联数组)甚至子程序,可以应用在程序的任何地方. 在变量前面加一个\就得到了这个变量的一个引用 #!usr/bin/p ...
- IIS 配置集中式证书模块实现网站自动绑定证书文件
在 Windows 环境下如果采用 IIS 作为 网站服务器时,常规的网站绑定 HTTPS 需要一个一个站点手动选择对应的证书绑定,而且证书过期之后更换证书时也是需要一个个重新绑定操作,无法便捷的做到 ...
- 【Spring系列】- Spring事务底层原理
Spring事务底层原理 生命不息,写作不止 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 一个有梦有戏的人 @怒放吧德德 分享学习心得,欢迎指正,大家一起学习成长! 目录 Sprin ...
- Day18.2：对象创建的内存分析图解
对象创建的内存分析 我们从两块最常用的内存空间对对象创建进行内存分析 堆内存:存放的是对象的具体信息:在程序之中堆内存空间的开辟是通过new完成的 栈内存:存放的是对象的地址信息,即通过地址找到堆内存 ...
- Linux系统安装 tftp服务 NFS服务
安装tftp服务 安装 sudo apt-get install tftp-hpa tftpd-hpa 配置文件 # /etc/default/tftpd-hpa TFTP_USERNAME=&quo ...
- 【Devexpress】gridcontorl实现复制多个单元格
1.设置复制的时候不复制标题在OptionsClipboard.CopyColumnHeaders=false 2.设置选择的方式为按照单元格选择,以及可以多选 OptionsSelection.Mu ...
- github访问慢怎么办
前言 访问github网速老不好?老掉线?下载贼慢?或许这篇笔记可以帮助你! Github访问慢的根本原因其实是CDN内容分发受到DNS污染,无法连接使用igithub的加速分发服务器,所以国内访问时 ...
- SQL语句筛选/查询
目录 SQL语句查询关键词 查询关键字之where筛选 查询关键字之分组 group by Group_concat 方法 查询关键字之having过滤 查询关键字之去重distinct 关键字之or ...