Vue中过滤器的使用

下面是一个日期格式的过滤器用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>

posted @ 2024-09-11 16:57 一个人走在路上阅读(3) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue中列表渲染中的v-for的使用

· V-Model是v-on和v-bind的语法糖，在vue中应该尽量不要看到DOM

· Vue学习笔记25--过滤器(日期格式化)

· Vue过滤器

· vue学习--常用特性(五、过滤器)

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现

公告

记录学习、用在实际，一路前行......

昵称：一个人走在路上
园龄： 2年6个月
粉丝： 0
关注： 5

+加关注

2025年3月

日

一

二

三

四

五

六

zy8899

从0到1，一步一步的走.....

Vue中过滤器的使用

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!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>