欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

换个角度使用VUE过滤器

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

换个角度使用vue过滤器

过滤器在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穿透功能。为了方便阅读,就且听下回分解吧。

欢迎感兴趣的朋友关注我的微信订阅号"小院不小",或者点击下方的二维码关注。我将多年开发中遇到的难点,以及一些有意思的功能,体会都会一一发布到我的订阅号中

换个角度使用VUE过滤器

闲来无事,采用cocos creator开发了一个小游戏,感兴趣的朋友一个可以来玩玩

换个角度使用VUE过滤器