Vue18 过滤器
2024-10-21 04:10:14
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>
最新文章
- VFP自定义函数StringFormat (仿.NET String.Format 方法)
- 状态压缩 HDU1074
- 搭建angular前端框架 命令
- Java设计模式-桥接模式(Bridge)
- 29.调整数组顺序使奇数位于偶数前面[ReOrderArray]
- Java内存访问重排序笔记
- Linux 安装 nginx注意
- OpenGl And 视图
- Making the Grade_滚动数组&;&;dp
- How do I place a group of functions or variables in a specific section?
- 通过克隆MAC地址 破解网通电信封路由
- (转)深入理解SP、LR和PC
- test for python thread
- SpringMVC解决跨域问题
- Maven-06: 插件的内置绑定
- java this关键字的使用
- Spider-two
- Tkinter的下拉列表Combobox
- 03_java基础(五)之项目结构搭建
- grafana 邮件报警
热门文章
- java 分布式游戏服务器框架,集群游戏服务器框架,游戏服务器网关框架 ioGame 网络游戏服务器框架
- 记一次mybatis性能问题分析过程
- phpword 模板文件导出word到服务器 并浏览器下载
- redisson分布式锁原理剖析
- windows 使用ACR122U-A9设备读写M1卡
- Spring Security(6)
- PyTorch Geometric Temporal 介绍 —— 数据结构和RGCN的概念
- loadrunner11安装时提示缺少Microsoft Visual c++2005 sp1组件的解决办法
- uniapp 微信小程序-点击图片放大图片
- SICP:符号求导、集合表示和Huffman树(Python实现)