Vue--自定義過濾器
阿新 • • 發佈:2018-11-02
自定義過濾器需要注意兩點:
1.需要給定過濾器一個唯一標識,如果自定義的過濾器與內建過濾器衝突,那麼內建過濾器則會被覆蓋。
2.過濾器函式的作用是輸入表示式的值,經過處理後輸出。那麼過濾器最好應該return一個有意義的值。
1.單個引數
HTML
<p v-text="message | reverse"></p>
自定義過濾器
Vue.filter('reverse',function(value){ return value.split('').reverse().join(''); })
指令碼資料
message: 'abc',
瀏覽器顯示結果
2.多引數
<p>{{msg}}的三次方為:{{msg | power '3'}}</p>
<p>{{mess}}</p>
Vue.filter('power',function(value,n){
var sum=value;
for(var i=1;i<n;i++){
sum=sum*value;
}
return sum;
});
msg: 2,
3.雙向過濾器
<input type="text" v-model="mess | filterExample" name="">
Vue.filter('filterExample',{
read:function(val){
return 'read'+val;
},
write:function(newVal,oldVal){
return newVal+'write';
}
});
mess: 'Hello Wrold'