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)  编辑  收藏  举报