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

  • 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. OSCP Learning Notes - Buffer Overflows(1)

    Introduction to Buffer Overflows Anatomy of Memory Anatomy of the Stack Fuzzing Tools: Vulnserver -  ...

  2. 虚拟DOM Vitural DOM Tree

      提起Virtual DOM,总是给人一种高深莫测的感觉,大家都知道它比DOM快.那么Virtual DOM到底是何方神圣呢?在深入理解Virtual DOM之前,先让我们回顾一下DOM. 一.什么 ...

  3. vue : 自定义脚手架提示

    做项目做烦了就想找点乐子. 比如,我们可以自定义脚手架提示.  webpack.dev.conf.js  54-78 行 module.exports = new Promise((resolve, ...

  4. javascript 通信协议

    简介 javascript 通信协议是一个伪协议[1], 用于指定 URL 为 JavaScript 代码 语法: javascript:someScript; someScript 是一个或多个使用 ...

  5. LaTeX公式学习

    简介 本文公式较多可能有加载较慢. 使用 LaTeX 的主要原因之一是它可以方便地排版公式.我们使用数学模式来排版公式. 公式 插入公式 可以用一对$来启用数学模式. 行中公式可以用如下方法: $数学 ...

  6. 水题----根据O出现次数判断分数

    There is an objective test result such as \OOXXOXXOOO". An `O' means a correct answer of a prob ...

  7. 痞子衡嵌入式:恩智浦i.MX RTxxx系列MCU特性那些事(1)- 概览

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的基本特性. 恩智浦半导体于2017年开始推出的i.MX RT系列重新定义了MCU,其第一款芯片i. ...

  8. onepill服务端

    运行git搞崩掉了重新创建... 1.新建SpringBoot项目 应该就这些 2. 使用的框架: 数据库:Spring Date JPA Service+Dao+Controller OKHttpC ...

  9. Fortify Audit Workbench 笔记 Path Manipulation

    Path Manipulation Abstract 通过用户输入控制 file system 操作所用的路径,借此攻击者可以访问或修改其他受保护的系统资源. Explanation 当满足以下两个条 ...

  10. 解决SyntaxError: Non-UTF-8 code starting with '\xbb'问题

    在第一行加入 # coding=utf-8 2020-06-13