过滤器介绍

官方教程地址: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. C#每天进步一点--事件

    事件:如果类型定义了事件成员,那么类型就可以通知其他对象发生了特定的事情.例如,Button类提供了一个名为Click的事件.应用程序中的一个或者多个对象可能想接收关于这个事件的通知,以便在Butto ...

  2. Codility---PermCheck

    Task description A non-empty zero-indexed array A consisting of N integers is given. A permutation i ...

  3. vuejs 使用less

    当所有东西都 准备好之后 : 第一步: 安装less依赖, npm install less less-loader --save 第二步: 修改webpack.config.js文件,配置loade ...

  4. asp.net core系列 66 Dapper介绍--Micro-ORM

    一.概述 目前对于.net的数据访问ORM工具很多,EF和EF Core是一个重量级的框架.最近在搭建新的项目架构,来学习一下轻量级的数据访问ORM工具Dapper.Dapper支持SQL Serve ...

  5. cookie 和 session 区别

    二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪录下来.当下次你再光临同一个网站,WEB 服务器会先看看有 ...

  6. ios开发系列之内存泄漏分析(下)

    接上篇,本篇主要讲解通知和 KVO 不移除观察者.block 循环引用 .NSThread 和 RunLoop一起使用造成的内存泄漏. 1.通知造成的内存泄漏 1.1.ios9 以后,一般的通知,都不 ...

  7. git操作相关

    -- 创建远程仓库 git init --bare git仓库文件夹名称 从远程仓库复制出本地仓库 git clone ./lth.git local 本地仓库和远程仓库的同步 本地仓库的配置文件co ...

  8. 一文秒懂CPU使用率

    目录 CPU:Cores, and Hyper-Threading  超线程(Hyper-Threading ) 多核(multi-cores) CPU使用率计算 CPU使用率测试 如何计算CPU使用 ...

  9. maven_nexus私服搭建

    搭建很简单,但是新版本运行方式有所区别,于此记录一下: 1.下载程序包:http://www.sonatype.org/nexus/downloads/ 官网比较慢,下了一小时.期间在csdn花了一积 ...

  10. 图片加载时间缓慢问题API

    一.背景       最近段时间,开发写值工具项目中,出现图片加载问题API,响应时间缓慢:为了优化图片加载问题,我进行图片压缩方法,然后API的图片加载还是慢,最终在自己无意中乱写找到了根本的原因. ...