介绍
类似于自定义指令，可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值
正文
1.系统过滤器
json lowercase uppercase filterBy 注意点：在Vue2.0中已经将系统过滤器给移除了
{{ msg | json }}-json格式
{{ msg | lowercase }} -小写
{{ msg | uppercase }}-大写
filterBy -管道 见前面品牌管理案例-过滤器
2.自定义过滤器
- 私有过滤器 ：定义在 VM中的filters对象中的所有过滤器都是私有过滤器
私有过滤器的弊端是：在多个VM中不能共享，会造成代码的冗余，将来维护成本高
<body>
<div id="app">
{{ time | datefmt}}
</div>
<script>
new Vue({
el:'#app',
data:{
time:new Date()
},
filters:{
//定义在 VM中的filters对象中的所有过滤器都是私有过滤器
datefmt:function(input,str,s1){
var date = new Date(input);
var year = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
//输出： yyyy-mm-dd
var fmtStr = year+'-'+m +'-'+d;
return fmtStr; //输出结果
}
}
});
- 全局过滤器
<div id="app">
{{ time | datefmt }}
</div>
<script>
//1.0 定义全局过滤器
Vue.filter('datefmt',function(input){
var date = new Date(input);
var year = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
//输出： yyyy-mm-dd
var fmtStr = year+'-'+m +'-'+d;
return fmtStr; //输出结果
});
new Vue({
el:'#app',
data:{
time:new Date()
}
});
它接收两个参数：过滤器 ID 和过滤器函数
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
过滤器函数可以接收任意数量的参数：
参数要引号
<!-- 'hello' => 'before hello after' -->
<span v-text="message | wrap 'before' 'after'"></span>
Vue.filter('wrap', function (value, begin, end) {
return begin + value + end
})
