过滤器

最新推荐文章于 2023-12-14 08:45:00 发布

你真好看l

最新推荐文章于 2023-12-14 08:45:00 发布

阅读量102

点赞数

分类专栏： vue的学习

本文链接：https://blog.csdn.net/qq_40052011/article/details/102601746

版权

vue的学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示格式化的日期时间</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<!--JavaScript 日期处理类库
		
		1理解过滤器
		功能：对要显示的数据进行特定格式化后再显示
		注意：并没有改变原本的数据，可是产生新的对应的数据
		2定义和使用过滤器
		1）定义过滤器
		Vue.filter(filterName,function(value[arg1,arg2,....]){
			//定义一定的数据处理
			return newValue;
		})
		2)使用过滤器
		<div>{{myDate | filterName}}</div>
		<div>{{myDate | filterName(arg)}}</div>
		-->
		<script src="moment.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="test">
			<p>{{date}}</p>
			<p>完整:{{date | dateStr}}</p>  <!--将date传给filter函数-->
			<p>年月日:{{date | dateStr('YYYY--MM-DD')}}</p>
			<p>时分秒:{{date | dateStr('h:mm:ss a')}}</p>
			
		</div>
		
		<script type="text/javascript">
			//自定义过滤
			Vue.filter('dateStr',function(value,format="YYYY-MM-DD, h:mm:ss a"){//ES6的形参默认值
				return moment().format(format );//moment时间类库
			})
			new Vue({
				el:'#test',
				data:{
					date:new Date()
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

你真好看l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。<!DOCTYPE html><html> <head> <meta charset="utf-8">...
复制链接

扫一扫