vue的過濾器語發及應用案例
阿新 • • 發佈:2018-11-15
str tid slice 價格 取代 四舍五入 tof ssa value 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 的值作為第三個參數。
*計算屬性完全可以取代過濾器,但有時使用過濾器比較方便。
vue的過濾器語發及應用案例