Vue 学习笔记 — filter
2017-03-30 本文已影响0人
冰麟轻武
对将要插入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>
