第六十五篇：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 ...
随机推荐
- springboot整合ueditor实现图片上传和文件上传功能
springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...
- Qt项目开发实例 （含源码）
源码传送门: 啊渊 / QT博客案例 · GitCode 目前QT的研发都是基于windows操作系统的,本文分享在国产操作系统中学QT的路线图,其实学习路线差不多,为了全面的回顾自己的学习知识,打算 ...
- js与java encodeURI 进行编码与解码
JS escape()使用转义序列替换某些字符来对字符串进行编码 JavaScript 中国 编码后 JavaScript %u4E2D%u56FD unescape()对使用 encodeUR ...
- python各种BUG报错解决
报错1 python学习交流群:660193417### Could not build atari-py: Command '['cmake', '..']' returned non-zero e ...
- Python快速下载商品数据，并连接数据库，保存数据
开发环境 python 3.8 pycharm 2021.2 专业版 代码实现 发送请求 获取数据 解析数据(筛选数据) 保存数据 连接数据库 开始代码 请求数据 # 伪装 headers = { ' ...
- 给你准备好了——50道Python面试题集锦（附答案）
Python是目前编程领域最受欢迎的语言.在本文中,我将总结Python面试中最常见的50个问题.每道题都提供参考答案,希望能够帮助你在2019年求职面试中脱颖而出,找到一份高薪工作.这些面试题涉及P ...
- ConcurrentHashMap树化链表treeifyBin
private final void treeifyBin(Node<K,V>[] tab, int index) { Node<K,V> b; int n, sc; if ( ...
- 2022-07-15 第六组 润土 Java03数据结构学习笔记
数据结构: 数组:最基本的数据结构(线性表) 链表:单向链表,双向链表 树:二叉树 图:深度优先遍历.广度优先遍历 查找: 线性查找 折半查找 排序: 冒泡排序* 快速排序 插入排序* 选择排序* 希 ...
- while循环和dowhile
while循环语句 根据条件来选择是否执行循环体内的执行语句 while语句会循环判断条件是否成立只要成立就会执行,直到条件不匹配循环结束 int a = 0: while(a<10){ a++ ...
- websocket心跳实现
简介 在实际项目中可能会使用到websocket,在使用过程中可能会存在一种问题就是,当网络异常断开时.或者websocket服务波动时,websocket会断开,导致异常,正常情况下,我们会采用心跳 ...