作者 | 秋季长青
链接 | https://my.oschina.net/u/3563169/blog/1577690
自定义过滤器的关键字是 filter。
官网描述：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>官网中提到的 管道 的关键字是“|”，其格式是：{{ data | fun }}。
自定义过滤器的作用：在数据显示之前，对数据进行处理包装。过滤器也分为全局过滤器（filter）和局部过滤器(filters)。具体用法见代码及注释部分：
js代码部分：
window.onload = function (){
// 定义全局过滤器
Vue.filter("test",function(data){
// 形参data的实参是管道{{ data | fun }}中 data
return data >=10;
}); new Vue({
el:"#app",
data:{
num:0,
today:new Date()
},
// 定义局部过滤器
filters:{
// 定义局部过滤器，将以为数字前补0，其他的原样输出
addZero:function(data){
return data>=10 ? data : "0"+data;
},
// 过滤器带多个参数
dateFormat:function(data,arg1,arg2){
// 可以打印 arg1/arg2 看看结果
// console.log(arg1);
// console.log(arg2);
let year = data.getFullYear();
let m = data.getMonth()+1;
let day = data.getDate();
return year+arg1+m+arg1+day;
}
}
});
}html代码部分：
<body>
<div id="app">
<input type="text" v-model="num">
<div>{{ num }}</div>
<!-- 使用管道 {{ data | fun }} -->
<p>通过全局过滤器 test 判断 num 是否 >=10</p>
<div>{{ num | test }}</div>
<hr/>
<p>通过局部过滤器 addZero，将以为数字前补0，其他的原样输出</p>
<div>{{ num | addZero }}</div>
<hr/>
<p>
管道前的参数永远都是过滤器方法的第一个参数，<br/>
过滤器方法括号中所定义的参数，以第二位参数开始向后顺序排列 </p>
<div>{{ today | date-format("-","参数二") }}</div>
</div></body>
至此，完毕。感谢您的阅读。
推荐阅读