资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么换个角度使用VUE过滤器-创新互联

这篇文章将为大家详细讲解有关怎么换个角度使用VUE过滤器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联建站主要从事成都做网站、成都网站建设、成都外贸网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务张家港,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

前言

过滤器在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 单文件组件的

在我们