Vue 学习笔记 — filter

简书

对将要插入html的对象进行处理

一个简单的Vue示例

基本过滤器用法

带参数的过滤器

全局过滤器

(这张图片有点问题,最后显示的应该是 hello world不是null)

过滤器的简单应用

 <!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8" />
		<title>vPager</title>
		<script src="vue.js"></script>
	</head>
 
	<body>
 
		<div id="test">
			<div>a:{{a | NoFiniteToZero(true)}}</div>
			<div>b:{{b | yyyy-MM-dd}}</div>
			<div>c:{{c | NoFiniteToZero}}</div>
			<div>d:{{d | NoFiniteToZero}}</div>
			<div>e:{{e | RunIfFunction}}</div>
		</div>
 
		<script>
			Vue.filter('yyyy-MM-dd', function(value) {
				if(value == null) return "";
				if(value.constructor === Date) {
					return [value.getFullYear()
							, value.getMonth() + 1
							, value.getDate()
							].join("-");
				}
				return value
			});
			Vue.filter('NoFiniteToZero', function(value, numberOnly) {
				if(numberOnly && typeof value !== "number") return value || "";
				if(value == null) return "0";
				return isFinite(value) ? value : 0;
			});
			Vue.filter('RunIfFunction', function(value) {
				if(value == null) return "";
				if(typeof value === "function") {
					return arguments.callee(value());
				}
				return value;
			});	
 
			var xx = new Vue({
				el: "#test",
				data: {
					a: null,
					b: new Date(),
					c: NaN,
					d: Infinity,
					e: function() { return function(){ return "ye"; } }
				}
			});
		</script>
	</body>
 
</html>

posted @ 2017-04-15 07:46 冰麟轻武阅读(384) 评论(0) 编辑收藏举报

冰麟轻武

Vue 学习笔记 — filter

一个简单的`Vue`示例

基本过滤器用法

带参数的过滤器

全局过滤器

过滤器的简单应用

公告

搜索

常用链接

最新随笔

我的标签

随笔分类 (78)

随笔档案 (67)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>vPager</title>
	<script src="vue.js"></script>
	</head>

	<body>

	<div id="test">
	<div>a:{{a \| NoFiniteToZero(true)}}</div>
	<div>b:{{b \| yyyy-MM-dd}}</div>
	<div>c:{{c \| NoFiniteToZero}}</div>
	<div>d:{{d \| NoFiniteToZero}}</div>
	<div>e:{{e \| RunIfFunction}}</div>
	</div>

	<script>
	Vue.filter('yyyy-MM-dd', function(value) {
	if(value == null) return "";
	if(value.constructor === Date) {
	return [value.getFullYear()
	, value.getMonth() + 1
	, value.getDate()
	].join("-");
	}
	return value
	});
	Vue.filter('NoFiniteToZero', function(value, numberOnly) {
	if(numberOnly && typeof value !== "number") return value \|\| "";
	if(value == null) return "0";
	return isFinite(value) ? value : 0;
	});
	Vue.filter('RunIfFunction', function(value) {
	if(value == null) return "";
	if(typeof value === "function") {
	return arguments.callee(value());
	}
	return value;
	});

	var xx = new Vue({
	el: "#test",
	data: {
	a: null,
	b: new Date(),
	c: NaN,
	d: Infinity,
	e: function() { return function(){ return "ye"; } }
	}
	});
	</script>
	</body>

	</html>

冰麟轻武

Vue 学习笔记 — filter

一个简单的Vue示例

基本过滤器用法

带参数的过滤器

全局过滤器

过滤器的简单应用

公告

搜索

常用链接

最新随笔

我的标签

随笔分类 (78)

随笔档案 (67)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

一个简单的`Vue`示例