第六十五篇：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-后门查杀
后门查杀 后门查杀这种题最好还是整个D盾直接扫描目录方便. 查看文件得到flag
- js中通过ajax调用网上接口
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- CAD图在线Web测量工具代码实现(测量距离、面积、角度等)
CAD如今在各个领域均得到了普遍的应用并大大提高了工程技术人员的工作效率.在桌面端,AutoCAD测量工具已经非常强大:然后在Web端,如何准确.快速的对CAD图在Web进行测量呢? 功能 能Web在 ...
- 安装gitlab客户端
1. 下载客户端软件包 https://pan.baidu.com/disk/home#/category?type=6&vmode=list 安装顺序: Git-2.13.3-64-bit. ...
- Android （微信扫码登录） 获取微信二维码+扫码登录
话不多说 直接上菜! 一.因为是微信扫码登录,所有要在微信开放平台 微信开放平台 (qq.com) 进行注册----- 如下 1.资源中心 里面也有详细的官方讲解,里面也有demo 可以下载 2 ...
- linux配置svn
1.安装 yum install subversion 2.测试安装是否成功: svnserve --version 3.创建目录并配置 建立版本库目录 mkdir -pv /data/svn/svn ...
- -bash: /usr/local/maven/apache-maven-3.8.1/bin/mvn: 权限不够
chmod a+x /usr/local/maven/apache-maven-3.8.1/bin/mvn
- Linux关闭avahi-daemon服务
avahi-daemon是一种Linux操作系统上运行在客户机上实施查找基于网络的Zeroconf service的服务守护进程. 该服务可以为Zeroconf网络实现DNS服务发现及DNS组播规范. ...
- Object类和toString方法 --和Object类的equals方法
一,Object类概述:Object是类层次结构的根,每个类都可以将Object作为超类,所有类都直接或者间接的继承自该类构造方法:pulic Object()在面向对象中,子类要访问父类的无参构造方 ...
- JavaWEB-03-JDBC
内容 JDBC `JDBC`简介 JDBC `JDBC`快速入门 JDBC API `JDBC API` 详解 数据库连接池 JDBC `JDBC`案例 1. JDBC入门 1.1 概述 概念 JDB ...