vue的过滤器语发及应用案例
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 的值作为第三个参数。
*计算属性完全可以取代过滤器,但有时使用过滤器比较方便。