过滤器介绍

官方教程地址:https://cn.vuejs.org/v2/guide/filters.html

过滤器常被用于一些文本格式化

我们可以自定义过滤器,可以实现各种各样的功能。

vue时间格式化

创建Date.js


var dateFormat = {
padLeftZero: function (str) {
return ('00' + str).substr(str.length)
},
formatDate: function (date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str))
}
}
return fmt
} } export default dateFormat;

引入Date.js

    import dateFormat from './assets/js/Date'

创建过滤器

   filters: {
formatDate(time) {
let date = new Date(time);
return dateFormat.formatDate(date, "yyyy.MM.dd");
}
},

应用过滤器

    <p>{{item.createDate | formatDate}}</p>

VUE过滤器的使用 vue 时间格式化的更多相关文章

  1. vue 工具函数的封装 时间格式化函数

    时间代码格式化工具函数的封装 小伙伴们,多封点工具函数,多封装点公共组件,多写点公共样式,照顾下互联网行业的新人把....~~~~~ /** yyyymmdd(new Date) -> &quo ...

  2. (尚015)Vue过滤器(对显示的数据进行格式化)

    现在日期为:当前时间-1970年1月1日0时0分0秒的时间差 日期格式化:百度搜索moment 1.test015.html <!DOCTYPE html><html lang=&q ...

  3. vue filter方法-时间格式化

    plugins/filter.js import Vue from 'vue' // 时间格式化 // 用法:<div>{{data | dataFormat('yyyy-MM-dd hh ...

  4. Vue Element Form表单时间验证控件使用

    如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...

  5. 3.Vue过滤器

    1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...

  6. 黑马vue---31-32、vue过滤器实例

    黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...

  7. vue - 过滤器filter的基本使用

    1.全局过滤器 输出: 过滤器可以多次来调用 输出: 2.私有过滤器 <!DOCTYPE html> <html lang="en"> <head&g ...

  8. vue中插值表达式中时间转换yyyy-MM-dd HH:mm:ss

    vue插值表达式中将时间转换两种方式:一.定义方法 <div id="app">当前实时时间:{{dateFormat(date)}}</div> //时间 ...

  9. 带你掌握Vue过滤器filters及时间戳转换

    摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...

随机推荐

  1. Delphi与Windows 7下的用户账户控制(UAC)机制(有可能需要取消enable runtime themes)

    WIN7/WIN8/WIN10, Vista提供的UAC机制,它的主要目的是防止对于操作系统本身的恶意修改.对于Delphi程序的影响,UAC主要在于以下几点:1.由于UAC机制,Delphi对于系统 ...

  2. Qt 访问网络的 HttpClient(封装QNetworkAccessManager,且有服务端)

    Qt 使用 QNetworkAccessManager 访问网络,这里对其进行了简单的封装,访问网络的代码可以简化为: 1 2 3 HttpClient("http://localhost: ...

  3. .NET错误:The tag 'BusyIndicator' ('CallMethodAction')does not exist in XML namespace

    将一个项目由VS2010升级为VS2012后,在确保代码无误的情况下编译程序出现以下错误提示: 解决方法:将4.0.0.0的程序集Microsoft.Expression.Interactions.及 ...

  4. return view 详解 MVC

    1.return View(); 返回值 类型:System.Web.Mvc.ViewResult将视图呈现给响应的 View() 结果. 注释 View() 类的此方法重载将返回一个具有空 View ...

  5. SYN3305A型 小型时统设备

       SYN3305A型  小型时统设备 产品概述 SYN3305A型小型时统设备是由西安同步电子科技有限公司精心设计.自行研发生产的一款高准确度的锁相石英频率标准.内装OCX0恒温晶体振荡器,利用G ...

  6. mysql数据库之表关系

    外键 前戏之一对多关系 # 定义一张部门员工表id name gender dep_name dep_desc1 jason male 教学部 教书育人2 egon male 外交部 漂泊游荡3 ta ...

  7. Storm 学习之路(九)—— Storm集成Kafka

    一.整合说明 Storm官方对Kafka的整合分为两个版本,官方说明文档分别如下: Storm Kafka Integration : 主要是针对0.8.x版本的Kafka提供整合支持: Storm ...

  8. Storm 学习之路(六)—— Storm项目三种打包方式对比分析

    一.简介 在将Storm Topology提交到服务器集群运行时,需要先将项目进行打包.本文主要对比分析各种打包方式,并将打包过程中需要注意的事项进行说明.主要打包方式有以下三种: 第一种:不加任何插 ...

  9. centos6.5虚拟机配置Nat模式连接外网

    想来在虚拟机上搭点软件,于是乎就想让虚拟机连上外网,就用到了Nat模式,自己对网络了解不是太深,以至于配置联网花了一下午.总结下联网步骤. (1)点击虚拟网络编辑器 (2)注意以下几点标红处 (3)点 ...

  10. 使用docker部署zabbix

    1 官方地址 官方写的很详细并且是中文的,一步步按照操作就可以 https://www.zabbix.com/documentation/3.4/zh/manual/installation/cont ...