在Vue中filter過濾器是一個非常強大的功能。
個人覺得稱它為加工車間會更加貼切一些。
過濾器可以用來篩選出符合條件的,丟棄不符合條件的;
加工車間既可以篩選,又可以對篩選出來的進行加工。
一、filter的作用是:對值進行篩選加工。
二、使用的地方有兩個位置,和兩個方式。
{{ msg | filterA }}雙括號插值內。
<h1 v-bind:id=" msg | filterA">{{ msg }}</h1>v-bind綁定的值的地方。
(msg為需要filter處理的值,filterA為過濾器。)
方式
{{ msg | filterA }}單個使用。
{{ msg | filterA| filterB }}多個連用。
三、過濾器的制作方法:
new Vue({
filters:{
//過濾器一:(使用時沒有參數,即{{msg|filterA}})
filterA(value){
return “¥”+value
}
}
})
//添加filters屬性,該屬性內的函數就是過濾器。其中value就是{{msg|filterA}}中的msg。
new Vue({
filters:{
//過濾器二:(使用時有參數,即{{ msg | filterA( arg1, arg2, arg3.... )}})
filterA (value , ...args){//其中msg為filterA中的第一個參數value。
for(arg in args{
console.log(arg)
value+=arg
}
return value
}
},
filterB (value , ...args){
for(arg in args{
console.log(arg)
value+=arg
}
return value
}
}
})
(使用時有參數,即{{ msg | filterA( arg1, arg2, arg3.... ) | filterB( arg1, arg2, arg3.... )}})
此時msg為filterA的第一個參數,filterA執行完后的返回值為filterB的第一個參數,以后也是依次類推。