如何换个角度使用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 相关文章推荐
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
vue props 单项数据流实例分享
Feb 16 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分页显示制作详细讲解
2006/10/09 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
js 判断 enter 事件
2009/02/12 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
详解Python 函数如何重载?
2019/04/23 Python
python如何读取bin文件并下发串口
2019/07/05 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
24岁生日感言
2014/01/13 职场文书
植树节标语
2014/06/27 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
二手车转让协议书
2015/01/29 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python