如何换个角度使用VUE过滤器详解


Posted in Javascript onSeptember 11, 2019

前言

过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作。官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已。但最近在做两款APP时,遇到一些特殊的需求。然后就对vue中的filter一些用法结合源码好好的梳理了下。下边我们以一个日期格式化展开讨论。

1. 定义一个日期格式化函数

都9012了,我们就采用 ES Module的写法,在vue初始化的项目src的文件中新建一个filters文件夹,并在其中添加DateFmt.js文件,代码如下

export function DateFmt(date, fmt) {
if (date == null) return null;
var o = {
  "M+": date.getMonth() + 1, // 月份
  "d+": date.getDate(), // 日
  "h+": date.getHours(), // 小时
  "m+": date.getMinutes(), // 分
  "s+": date.getSeconds(), // 秒
  "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
  "S": date.getMilliseconds()
};
if (/(y+)/.test(fmt))
  fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
  if (new RegExp("(" + k + ")").test(fmt))
    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}

2. 使用过滤器 DateFmt

定义好函数后,我们采用全局注册filter的方式。在main.js中使用import { DateFmt } from '@/filters/DateFmt.js' 导入我们上边定义的函数。 使用Vue.filter("DateFmt", DateFmt) 完成filter全局注册。

在components文件夹中,添加我们的测试组件DateFormat.vue,在该文件template>div节点下输入{{new Date()|DateFmt('yyyy-MM-dd hh:mm:ss')}} 然后在app.vue引入我们刚新添加的组件,运行,你就会在看到当前日期已经按照我们需要的格式显示在网页上。是的,就是这么简单,那完了么?

3. 在JS中使用 DateFmt

好奇的朋友会发现,我们定义的filter都是在template中使用的,那我如何在js代码中使用呢?当然,在开发这两个app期间,减少数据转换的次数,有了这样的需求。

3.1 在组件页面导入函数

回到开头,我们强调了一下,过滤器其实就是一个函数。既然是函数,那引入就好了。所以在我们最初建立 DateFormat.vue 单文件组件的<script>块中使用import { DateFmt } from '@/filters/DateFmt.js'导入我们的函数。代码如下:

<script>
import { DateFmt } from '@/filters/DateFmt.js';
export default {
data(){
return{
curDateImportFilter: DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss')
}}}
</script>

在我们<template>中新加一个元素,并绑定 curDateImportFilter属性,运行 npm run serve 回到浏览器,你就会看到两个格式化日期。这样好吗?我们多了一个import , 虽然实现了,但觉得不够好。

3.2 使用Vue.filter 返回过滤器

如果我们仔细看官方文档,就会发现官说明了,通过 Vue.filter("filter")返回定义的函数 ,所以Vue.filter不仅可以注册,还可以返回。

我们继续在data中添加属性 :

curDateVueFilter: Vue.filter("DateFmt")(new Date(), 'yyyy-MM-dd hh:mm:ss')

通过上边的步骤绑定该属性,你会在浏览器上看到三个格式化好的日期。要使用Vue.filter,我们不得不额外的导入import Vue from 'vue'。跟上边一样,虽然实现了,但不够好。

3.3 使用实例属性$options

在vue组件,每个组件都有各自的属性,这些属性大多挂载中属性 $options中,在chrome浏览器打印$vm0信息,我们就找到filter的信息。这里科普一下,在安装vue开发者工具后$vm0表示我们当前选择的组件,结果如下图所示:

如何换个角度使用VUE过滤器详解

从图形上看,当前组件的filters为一个对象,并不能直接找到,不过展开至__proto__原型上看到了我们的DateFmt方法。好了现在我们在继续在data中添加属性

curDateOptFilter: this.$options.filters.DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss')

是的,采用这个方式,就不用再引入vue或者函数了,跟直接在template使用一样。简洁方便,感觉好多了。在深入一点,通过调试我们就会发现 Vue.filter 是调用options.filters原型上的方法,如下图所示

如何换个角度使用VUE过滤器详解

4. 总结

再简单的功能,也有你想不到的用法。做开发,还是要会发散。本来这篇文章还想分享一下 vue 中scope css穿透功能。为了方便阅读,就且听下回分解吧。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 #jQuery
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 #Javascript
解析vue、angular深度作用选择器
Sep 11 #Javascript
javascript 构建模块化开发过程解析
Sep 11 #Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 #Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 #Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 #Javascript
You might like
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python中的模块和包概念介绍
2015/04/13 Python
python基于openpyxl生成excel文件
2020/12/23 Python
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
港湾网络笔试题
2014/04/19 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
高三自我鉴定怎么写
2013/10/19 职场文书
电子信息专业学生自荐信
2013/11/09 职场文书
教师党员整改措施
2014/10/24 职场文书
财务审计整改报告
2014/11/06 职场文书
就业导师推荐信范文
2015/03/27 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android