过滤器介绍

官方教程地址: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. 逻辑回归模型(Logistic Regression)及Python实现

    逻辑回归模型(Logistic Regression)及Python实现 http://www.cnblogs.com/sumai 1.模型 在分类问题中,比如判断邮件是否为垃圾邮件,判断肿瘤是否为阳 ...

  2. PC-lint 简明教程(C/C++静态代码检查工具)

    前言 PC-lint是一款小而强大的C/C++静态代码检查工具,它可以检查未初始化变量,数组越界,空指针等编译器很难发现的潜在错误.在很多专业的软件公司如Microsoft,PC-Lint检查无错误无 ...

  3. c# 9png实现(图片缩放)

    跟据9png的实现原理自己写了个生成图片的函数,9png的原理是将图片切成9块如下 其中1.3.7.9不进行缩放,2,4,5,6,8进行缩放,这样就防止了放大后导致边界出现锯齿的问题 在实现过程中主要 ...

  4. ssh超时时间设置(设置ClientAliveInterval),附SSH超详细参数

    作者: daodaoliang 版本: V 0.0.1 日期: 2016年12月29日 0x00 OpenSSH 简介 OpenSSH是采用SSH协议实现的重要的远程连接工具,它对所有的数据进行加密以 ...

  5. Codility---CountFactors

    Task description A positive integer D is a factor of a positive integer N if there exists an integer ...

  6. centos 部署 asp.net core Error -99 EADDRNOTAVAIL address not available解决

    centos7.3上部署 asp.net core 错误如下: Hosting environment: Production Content root path: /home/netcore Now ...

  7. java中的String、StringBuffer、StringBuilder的区别

    java中String.StringBuffer.StringBuilder是编程中经常使用的字符串类,他们之间的区别也是经常在面试中会问到的问题.现在总结一下,看看他们的不同与相同. 1.可变与不可 ...

  8. HTML连载12-体验CSS

    一.通过标签来修改标签有哪些缺点: (1)需要记忆那些标签有哪些属性 (2)若该标签没有这个属性,则修改失败 (3)需求变更,需要修改大量的代码 (4)HTML标签及用于添加语义,与我们的定义不相符 ...

  9. MyBatis中二级缓存和延时加载同时开启的问题

    首先,二级缓存默认不开启! 要配置 <setting name="cacheEnabled" value="true"/> 在MyBatis中:一级 ...

  10. Elasticsearch-head插件使用小结

    1.ElasticSearch-head是什么? ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasti ...