1. 程式人生 > >Vue--自定義過濾器

Vue--自定義過濾器

自定義過濾器需要注意兩點:

     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'