首页 > 其他分享 >Vue中过滤器的使用

Vue中过滤器的使用

时间:2024-09-11 17:05:59浏览次数:10  
标签:Vue dateFormat DD YYYY date 使用 过滤器

下面是一个日期格式的过滤器用moment.js来做的一个日期过滤器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
      <p>
       <!--过滤器的使用-->
        {{ date | dateFormat('YYYY-MM-DD HH:mm:ss') }}<br>
        {{ date  }}<br>
        {{ date | dateFormat('YYYY-MM-DD ') }}<br>
        {{ date | dateFormat('YYYY年MM月DD日 HH:mm:ss') }}<br>
   
    </p>
   
   
    
    </div>
    <script src="vue.js"></script>
    <script src="moment.js"></script>
    <script>
        //全局过滤器
        Vue.filter("dateFormat", function(value,format) {{
            return moment(value).format( format || "YYYY-MM-DD HH:mm:ss");
        }}) 


        var vm=new Vue({
            el:'#app',
            data:{
                message:'Hello Vue.js!',
                date:new Date()
            }

        })
    </script>
</body>
</html>

标签:Vue,dateFormat,DD,YYYY,date,使用,过滤器
From: https://www.cnblogs.com/zy8899/p/18408511

相关文章

  • Ethereum学习笔记 ---- 使用 Remix 调试功能理解 bytes 在 memory 中的布局
    目录编写合约编译、部署、调用合约调试交易1.调用函数bytesInMemory(),分析bytes的MemoryLayout执行RETUR前的最后一刻,stack快照如下执行完毕时刻的MemoryLayout对MemoryLayout的分析2.调用函数bytesArrayInMemmory(4),分析bytes[]的MemoryLayout执行RETUR前......
  • Vue中列表渲染中的v-for的使用
    v-for的使用:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</tit......
  • 使用W外链创建微信短链接的方法
    创建短链是将长链接转换为更短、更易于分享和记忆的链接的过程。W外链是一个提供短链接生成服务的平台,它支持多种功能,包括但不限于:短链制作:用户可以将长链接缩短为易于分享的短链接,还支持自定义短链后缀。防红防封:通过技术手段对原始链接进行加密和伪装,以绕过一些限制和屏蔽......
  • YOLOv9改进策略【Neck】| 使用CARAFE轻量级通用上采样算子
    一、本文介绍本文记录的是利用CARAFE上采样对YOLOv9的颈部网络进行改进的方法研究。YOLOv9采用传统的最近邻插值的方法,仅考虑子像素邻域,无法捕获密集预测任务所需的丰富语义信息,从而影响模型在密集预测任务中的性能。CARAFE通过在大感受野内聚合信息、能够实时适应实例特定......
  • 基于Springboot+vue校园求职招聘系统设计
    ......
  • 超声波 HC-SR04 的使用 CubeMx + STM32F103C8T6 【含两个】
    HC-SR04的使用一、超声波模块介绍二、工作原理介绍三、接线方式四、驱动方式方法一方法二五、程序实现串口查看数据方法一HC_SR04.cHC_SR04.hmain.cmain.h串口数据显示方法二main.cmain.h六、数据处理一、超声波模块介绍HC-SR04是一种常用的超声波测距模块。......
  • 结合GPT使用k8s部署awx-oprator
    这个错误表明你尝试添加的Helm仓库URL无法访问,或者index.yaml文件不存在,可能是AWXOperator的Helm仓库已经变更或不再支持这个URL。根据AWXOperator项目的最新文档,它不再使用Helm作为主要的安装方式,而是通过直接应用Kubernetes自定义资源(CRD)和Operator来安装......
  • 京东鸿蒙上线前瞻——使用 Taro 打造高性能原生应用
    背景2024年1月,京东正式启动鸿蒙原生应用开发,基于HarmonyOSNEXT的全场景、原生智能、原生安全等优势特性,为消费者打造更流畅、更智能、更安全的购物体验。同年6月,京东鸿蒙原生应用尝鲜版上架华为应用市场,计划9月完成正式版的上架。早在2020年,京东与华为就签署了战略......
  • 【F179】基于Springboot+vue实现的幼儿园管理系统
    作者主页:Java码库主营内容:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。收藏点赞不迷路 关注作者有好处文末获取源码项目描述系统管理也都将通过计算机进行整体智能化操作,对于幼儿园管理系统所牵扯的管理......
  • 京东鸿蒙上线前瞻——使用 Taro 打造高性能原生应用
    背景2024年1月,京东正式启动鸿蒙原生应用开发,基于HarmonyOSNEXT的全场景、原生智能、原生安全等优势特性,为消费者打造更流畅、更智能、更安全的购物体验。同年6月,京东鸿蒙原生应用尝鲜版上架华为应用市场,计划9月完成正式版的上架。早在2020年,京东与华为就签署了战略合作......