第六十五篇：Vue的过滤器
好家伙，
过滤器，vue3取消了，只有vue2能用
1.过滤器
过滤器（Filters）是vue为开发者提供的功能，常用于文本的格式化。
过滤器可以用在两个地方：插值表达式和v—bind属性绑定。
过滤器应该被添加在JavaScript表达式的尾部，由“管道符”进行调用，("|"我愿称其为竖杠)
示例代码如下：
//在双花括号中通过＂管道符＂调用 capitalize 过滤器，对 message的值进行格式化
<p>{{ message | capi }}</p>
//在v—bind 中通过“管道符”调用 formatid 过滤器，对rawld 的值进行格式化
<div v-bind:id="rawld | capi"></div>
管道符左边是常规数据,将其作为参数传给右边的过滤器函数,再将处理完的值返回.
所以他真的是个顾名思义的"过滤器"
试用一下:
<body>
<div id="app">
<p>message的值是:{{ message | capi }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
message:'you are so fucking handsome',
},
methods:{
},
filters:{
//在filters下定义capi
capi(val){
//字符串有charAt方法,这个方法接收索引值,表示从字符串中把索引对应的字符获取出来
// val.charAt(0)
// toUpperCase() 方法用于把字符串转换为大写
const first = val.charAt(0).toUpperCase()
// 字符串的slice方法,可以截取字符串,从指定索引往后截取
const other =val.slice(1)
// 过滤器中,一定要有一个返回值
return first + other
}
}
})
</script>
</body>
网页如下:
2.过滤器的作用域
在filters 节点下定义的过滤器，称为“私有过滤器”，
因为它只能在当前 vm 实例所控制的el区域内使用
如果希望在多个vue 实例之间共享过滤器，
则可以按照如下的格式定义全局过滤器：
( 在<script>下定义,与const vm= new vue({})平级 )
// 全局过滤器 — 独立于每个 vm 实例之外
// Vue．filter（）方法接收两个参数：
Vue.filter('capitalize', (str) => {
// 第1个参数，是全局过滤器的＂名字”
// 第2个参数，是全局过滤器的＂处理函数”
return str.charAt(0).toUpperCase()+ str.slice(1) + '~~'
})
补充,如果全局过滤器和私有过滤器名字冲突,优先使用私有过滤器,就近原则
3.用一下
试着用过滤器改善一下前面的时间显示
这里我们用到day.js插件
为"时间显示"这一项添加过滤器
<td>{{ item.time | DateFormat }}</td>
添加配置
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script>
Vue.filter('DateFormat',function(time){ const dtStr = dayjs(time).format('YYYY-MM-DD HH:mm:ss')
return dtStr })
更改前:
更改后:
4.补充调用多个过滤器
<p>{{ message | xxx | yyy | zzz }}</p>
可以使用管道符连续调用多个过滤器
That's all ! !
第六十五篇：Vue的过滤器的更多相关文章
- 第六十五篇、OC_iOS7 自定义转场动画push pop
自定义转场动画,在iOS7及以上的版本才开始出现的,在一些应用中,我们常常需要定制自定义的的跳转动画 1.遵守协议:<UIViewControllerAnimatedTransitioning& ...
- 《手把手教你》系列技巧篇（六十五）-java+ selenium自动化测试 - cookie -下篇（详细教程）
1.简介 今天这一篇,宏哥主要讲解:利用WebDriver 提供可以读取.添加和删除cookie 信息的相关操作方法.验证浏览器中是否存在某个cookie.原因是:因为基于真实的cookie 的测试是 ...
- Egret入门学习日记 --- 第十五篇（书中 6.1~6.9节 内容）
第十五篇(书中 6.1~6.9节 内容) 好的,昨天完成了第五章. 今天来看第六章. 总结重点: 1.如何对组件进行分组? 跟着做: 重点1:如何对组件进行分组? 首先,选中你想要组合的组件. 然后点 ...
- OpenCV开发笔记（六十五）：红胖子8分钟带你深入了解ORB特征点（图文并茂+浅显易懂+程序源码）
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...
- 解剖SQLSERVER 第十五篇 SQLSERVER存储过程的源文本存放在哪里？（译）
解剖SQLSERVER 第十五篇 SQLSERVER存储过程的源文本存放在哪里?(译) http://improve.dk/where-does-sql-server-store-the-sourc ...
- Python之路【第十五篇】：Web框架
Python之路[第十五篇]:Web框架 Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...
- 第十五篇 Integration Services：SSIS参数
本篇文章是Integration Services系列的第十五篇,详细内容请参考原文. 简介在前一篇,我们使用SSDT-BI将第一个SSIS项目My_First_SSIS_Project升级/转换到S ...
- 第三百六十五节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询
第三百六十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询 1.elasticsearch(搜索引擎)的查询 elasticsearch是功能 ...
- 【译】第十五篇 Integration Services：SSIS参数
本篇文章是Integration Services系列的第十五篇,详细内容请参考原文. 简介在前一篇,我们使用SSDT-BI将第一个SSIS项目My_First_SSIS_Project升级/转换到S ...
随机推荐
- pytorch 中 repeat 和 expend 的功能和区别
功能 均是用于扩展张量的维度 区别 tensor.expand(*sizes) 将张量中单维度(singleton dimensions,即张量在某个维度上为1的维度,exp(1,2,3),其中在第一 ...
- 教你用VS code 生成vue-cli代码片段
可以自定义设置名字:name.json { "Print to console": { "prefix": "vue", "bod ...
- SimpleMarkDown编辑器离线版以及桌面应用版上线
之前,我们开发了Web版本SimpleMarkDown编辑器.今天,我们又推出了离线版和桌面应用版. 主要功能: 页面简约: 实时保存: 一键清空内容: 支持微信公众号.知乎.稀土掘金.CSDN等多个 ...
- SAP Web Dynpro-监视应用程序
您可以使用ABAP监视器来监视Web Dynpro应用程序. 存储有关Web Dynpro应用程序的信息. 您可以使用T代码-RZ20查看此信息. 您可以在Web Dynpro ABAP监视器中查看以 ...
- Pytorch从0开始实现YOLO V3指南 part4——置信度阈值和非极大值抑制
本节翻译自:https://blog.paperspace.com/how-to-implement-a-yolo-v3-object-detector-from-scratch-in-pytorch ...
- XJSON 是如何实现四则运算的？
前言 在上一篇中介绍了 xjson 的功能特性以及使用查询语法快速方便的获取 JSON 中的值. 同时这次也更新了一个版本,主要是两个升级: 对转义字符的支持. 性能优化,大约提升了30%️. 转义字 ...
- HashSet底层HashMap源码分析
在看HashSet源码的时候,意外发现底层HashMap保存的value居然不是null,而是保存一个Object作为Value.顿觉有悖常理,于是来分析一下: HashSet的add方法: publ ...
- [ERROR] Another process with pid 914 is using unix socket file.
mysql启动报错 1.首先到mysql的配置文件中,确定socket文件路径 vim /etc/my.cnf 2.删除mysql.sock.lock 3.启动mysql
- 部署yum仓库
YUM介绍 YUM(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器. 基于RPM包管理,能够从指定的 ...
- fpga中的存储器
fpga中的存储器三种:RAM,ROM,FIFO. RAM和ROM已经比较熟悉了,记录一下FIFO. FIFO:first in first out ,顺序存取,先入先出.是一种数据缓存器,用来作不同 ...