第六十五篇：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 ...
随机推荐
- NCF 的Azure Cosmos DB 演示案例
简介 NCF想必看过我之前发的NCF的文章的同学们都已经很熟悉了 今天我们要来聊一聊的是NCF遇到Azure Cosmos DB后会碰撞出什么样的火花,让我们一起往下看 我们先来说说什么是Azure ...
- SQL注入漏洞篇
一篇SQL注入漏洞汇总,更新中-- 如有缺陷 望大佬指正 SQL注入产生的原因? 当程序执行逻辑时没有对用户输入的参数做过滤处理,使参数直接与后台数据库产生逻辑交互,即SQL注入黑客就可以利用各种SQ ...
- Spring框架系列(5) - 深入浅出SpringMVC请求流程和案例
前文我们介绍了Spring框架和Spring框架中最为重要的两个技术点(IOC和AOP),那我们如何更好的构建上层的应用呢(比如web 应用),这便是SpringMVC:Spring MVC是Spri ...
- WPF开发随笔收录-DrawingVisual绘制高性能曲线图
一.前言 项目中涉及到了心率监测,而且数据量达到了百万级别,通过WPF实现大数据曲线图时,尝试过最基础的Canvas来实现,但是性能堪忧,而且全部画出来也不实际.同时也尝试过找第三方的开源库,但是因为 ...
- Python爬虫+数据可视化教学：分析猫咪交易数据
猫猫这么可爱 不会有人不喜欢吧: 猫猫真的很可爱,和我女朋友一样可爱~你们可以和女朋友一起养一只可爱猫猫女朋友都有的吧?啊没有的话当我没说-咳咳网上的数据太多.太杂,而且我也不知道哪个网站的数据比较好 ...
- TCP和UDP协议的区别以及原理
参考文章https://blog.csdn.net/weixin_38483133/article/details/123864253
- 用 40 块搞个游戏机「GitHub 热点速览 v.22.27」
作者:HelloGitHub-小鱼干 最便宜的小霸王游戏机都超过了五十,但是现在有了 PicoBoot 你用 40 块的树莓派就能搞出个任天堂游戏机(NGC).PicoBoot 替换了 NGC 的 I ...
- llinux的mysql数据库完全卸载
https://blog.csdn.net/qq_41829904/article/details/92966943https://www.cnblogs.com/javahr/p/9245443.h ...
- 自定义nginx的日志格式存储到Filebeat和Logstash
vim /etc/nginx/nginx.conf log_format main '$remote_addr - $remote_user [$time_local] ' '"$reque ...
- ApiDay002_02 Object中的包装类
1.Object:对象/东西 是所有类的鼻祖,所有类都直接或间接继承了Object, 万物皆对象,为了多态 Objec中有几个经常被派生类重写的方法:toString()和equals(); 调用to ...