给日期类型过滤器设置不同格式

  • dayjs是一款轻量级的日期操作库 https://day.js.org/en
import Vue from 'vue'
import dayjs from 'dayjs' // {{ 表达式 | 过滤器 }}
// value: 表达式结果
// format: 格式,默认为 YYYY-MM-DD HH:mm:ss
Vue.filter('date', (value, format = 'YYYY-MM-DD HH:mm:ss') => {
return dayjs(value).format(format)
})
<span class="date">{{article.createdAt | date}}</span> <!-- 默认 -->
<span class="date">{{article.createdAt | date('MMM DD YYYY')}}</span> <!-- 月份简写 天 年 -->

Vue 过滤器 Filter传递参数的更多相关文章

  1. vue中 router-link 传递参数以及获取

    将所遇见的问题一步一步记录下来,不久便会成长 今天在修改前端(vue) BUG的时候遇见 router-link标签,传递参数到另一个页面,确不知道参数在另一个页面怎么接收,于是找度娘需求解决办法,最 ...

  2. vue 过滤器filter的详解

    1.代码运用的地方 <!-- 在双花括号中 --> {{ date | formatDate}} <!-- 在 `v-bind` 中 --> <div v-bind:id ...

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

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

  4. vue父子组件传递参数之props

    vue中父组件通过props传递数据给子组件, props有两种传递方式 1.props:['msg']2.props: { msg:{ type:String, default:"&quo ...

  5. vue 过滤器 filter 的使用

    1.局部过滤器的使用 比如性别,订单状态的数据,后端一般返回数字来代替状态.以性别为模拟数据,0是未知,1是男,2是女. 直接数据渲染出来,只有012,没有性别 根据后端返回的int类型值,前端对数据 ...

  6. Vue 过滤器入门

    Vue 允许自定义过滤器,可被用于一些常见的文本格式化 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 过滤器应该被添加在JavaScript表达式的尾部,由"管道" ...

  7. AngularJS过滤器filter入门

    在开发中,经常会遇到这样的场景 如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来: 如我要换个羽毛球拍, ...

  8. vue的过滤器filter

    前记: 排版记录,未免太耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2 ...

  9. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

随机推荐

  1. ScheduledThreadPoolExecutor源码主要部分解析

    ScheduledThreadPoolExecutor继承与基础线程池类ThreadPoolExecutor并实现ScheduledExecutorService接口. 其中ScheduledExec ...

  2. CCNA-Part4 -网络层 - IP 协议了解一下

    网络层主要提供寻址,路由的功能.而 IP 协议就是为了实现该功能而设计的. IP 协议 IP 协议的特性 工作在网络层 面向无连接的协议 具有单独处理包的能力 分层的地址 不可靠,尽力而为的传送 独立 ...

  3. 不懂DevOps!他在升职加薪的那天下午,提出了离职

    不久前我们一个已毕业的学员向班主任老师分享了前几天他遇到的一件事: 一个许久未联系他的朋友突然打电话给他,寒暄了几句后突然说,想来北京找工作,问能不能帮忙给介绍一些工作. 在接下来的通话中,我们学员了 ...

  4. Shell基本语法---case语句

    case语句 格式 case 变量 in 值1 ) 执行动作1 ;; 值2 ) 执行动作2 ;; 值3 ) 执行动作3 ;; .... * ) 如果变量的值都不是以上的值,则执行此程序 ;; esac ...

  5. DJANGO-天天生鲜项目从0到1-003-用户模块-登录

    本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...

  6. Java环境变量设置:Path、CLASSPATH、JAVA_HOME的作用分别是什么?

    1.Path 作用是指定命令搜索路径,在i命令行下面执行命令如javac编译java程序时,它会到PATH变量所指定的路径中查找百看是否能找到相应的命令程序.        需要把jdk安装目录下的b ...

  7. 互联网找的e是无理数的初等证明

    e的两种计算方式 \(e=lim_{n \to \infty}(1+\frac{1}{n})^n\) \(e=\sum_{n=0}^{+\infty}\frac{1}{n!}\) \(即,e=\fra ...

  8. Antd DatePicker 语言项-显示中文月份

    官网:https://ant.design/components/date-picker-cn/ 如果要显示中文,官网是这么指导的: 但是,设置后并没有生效!原因是默认的中文local文件并没有月份的 ...

  9. Qt子类化后qss设置背景色无效的问题

    1.问题背景 在某个类中,用到了一个组合的widget,有按钮进度条等,类似于视频播放器按钮控制区和精度条(参考了很多feiyangqingyun的文章,感谢),调试正常后整理代码,为了提高代码可读性 ...

  10. SSM框架练习之Jsp页面使用taglib标签报错500的问题

    最近在练手一个SSM的基于AdminLET框架模板的后台管理系统,使用的环境是tomcat9,使用Maven构建并通过添加Web模板框架的项目,在添加完所有的配置文件后启动tomcat运行,出现了一个 ...