1. 简介
用来过滤模型数据，在显示之前进行数据处理和筛选
语法：{{data | filter1(参数) | filter2(参数)}}
2.自定义过滤器
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
可以在一个组件的选项中定义本地的过滤器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
或者在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
当全局过滤器和局部过滤器重名时，会采用局部过滤器。
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。 过滤器可以串联：
{{ message | filterA | filterB }}
在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。 过滤器是 JavaScript 函数，因此可以接收参数：
{{ message | filterA('arg1', arg2) }}
这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
3.示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<div class="mui-content" id="content">
<h3>{{8 | addZero}}</h3>
<h3>{{66.8935462 | formatNumber(5,'这是四舍五入')}}</h3>
<h3>{{currentTime | formatTime}}</h3>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/vue.js"></script>
<script type="text/javascript">
mui.init();
// 自定义全局过滤器
Vue.filter('addZero',function(data){
console.log(data);
return data<10?'0'+data:data;
})
Vue.filter('formatNumber',function(data,n,msg){
console.log(data,n,msg);
return msg+data.toFixed(n);//toFixed方法有bug,不准，建议自己写
})
var vm=new Vue({
el:"#content",
data:{
currentTime:Date.now()
},
filters:{
//局部过滤器
formatTime:function(data){
console.log(data);
var d=new Date(data);
return d.getFullYear()+"-"+d.getMonth()+"-"+d.getDay()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
}
}
})
</script>
</body>
</html>
