当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

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

    栏目:代码类 时间:2019-09-11 18:12

    前言

    过滤器在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