1.使用地方：
双花括号插值处或 组件属性处
例：
{{ message | capitalize }}
<div v-bind:id="rawId | formatId"></div>
2.分为两种定义方式：
（1）全局定义
Vue.filter(‘capitalize‘, function (value) {
if (!value) return ‘‘
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
例2：过滤性别。0返回男，1返回女
<div>{{source|gender}}</div>
Vue.filter(‘gender‘, function (value) { //value是要准备过滤的原值
return value === 0 ? ‘男‘ : ‘女‘
})
const vm = new Vue({
el:"#root",
data:{
source:0
}
})
（2）局部定义
filters: {
capitalize: function (value) {
if (!value) return ‘‘
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
例2：
const vm = new Vue({
el:"#root",
data:{
source:0
}，
filter：{
gender(value){
return value === 0 ? ‘男‘ : ‘女‘
}
}
})
<div>{{source|gender|surfix}}</div>
例3：连续过滤 过滤完性别之后，再在结果上加“人”
const vm = new Vue({
el:"#root",
data:{
source:0
}，
filter：{
gender(value){
return value === 0 ? ‘男‘ : ‘女‘
}，
surfix (value) {
return value + ‘人‘
},
}
})
<div>{{source|gender}}</div>
例4：购物车里价格返回两位小数
const vm = new Vue({
el:"#root",
data:{
source:0，
price：123.4567
}，
fixed (value) {
return value.toFixed(2) //toFixed把 Number 四舍五入为指定小数位数的数字。
}
},
})
<div>{{price|fixed}}</div> //123.45
例5：传参
const vm = new Vue({
el:"#root",
data:{
source:0，
price：123.4567
}，
fixed (value，segment) {
return value.toFixed(segment) //toFixed把 Number 四舍五入为指定小数位数的数字。
}
},
})
<div>{{price|fixed（segment）}}</div> //123.45
3.可以对一个值进行连续过滤
{{ message | filterA(‘arg1‘, arg2) }}
4.可以传多个参数
{{ message | filterA(‘arg1‘, arg2) }}
这里 message 的值作为第一个参数，普通字符串 ‘arg1‘ 作为第二个参数，表达式 arg2 的值作为第三个参数。
*计算属性完全可以取代过滤器，但有时使用过滤器比较方便。
原文地址：https://www.cnblogs.com/kaiqinzhang/p/9962500.html