第六十五篇：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 ...
随机推荐
- BUUCTF-webshell后门
webshell后门 老方法,D盾直接查杀. flag{ba8e6c6f35a53933b871480bb9a9545c}
- linux-python安装pip
wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate sudo python3 get-pip.py linux 建立软连接 ...
- 强化学习-Windows安装gym、atari和box2d环境
安装gym pip3 install gym pip3 install gym[accept-rom-license] 安装atari环境[可选] 下载安装VS build tools 如果出现 OS ...
- Python制作手游《和平精英》游戏资料查询助手
写在前面的一些P话: <和平精英>这个游戏想必大家都玩过了,今天来教大家制作一个<和平精英>游戏的资料查询助手 受害者地址: https://gp.qq.com/main.sh ...
- docker-compose: 未找到命令，安装docker-compose
1.安装扩展源 sudo yum -y install epel-release 2.安装python-pip模块 sudo yum install python-pip 3.通过命令进行安装 cd ...
- nginx配置的server_name无法访问
问题: 我的nginx.conf配置文件中的server_name是这样子的,然后无法访问. 但是如果说server_name后面改成服务器的IP地址却是可以访问的. 解决方案: 在本机上(不是服务器 ...
- c# 把网络图片http://....png 打包成zip文件
思路: 1.把网络图片下载到服务器本地. 2.读取服务器图片的文件流 3.使用zip帮助类,把图片文件流写进zip文件流. 4.如果是文件服务器,把zip文件流 推送文件服务器,生成zip的下载url ...
- Halcon 模板匹配实战代码（一）
模板图片:目标是获取图像左上角位置的数字 直接想法,直接用一个框将数字框出来,然后对图片进行模板匹配(不可行,因为图像中的数字不是固定的) 所以需要选择图像中的固定不变的区域来作为模板,然后根据模板区 ...
- PTA(BasicLevel)-1031 查验身份证
一.问题定义 一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下:首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,1 ...
- Tapdata 在“疫”线：携手张家港市卫健委争分夺秒实时抗疫
"抗疫两年以来最困难的时期,是漫长冬夜还是倒春寒?"--国家传染病医学中心主任张文宏 于3月14日凌晨 "等到疫情结束了,我一定要--",常怀这样的期许 ...