Vue 中的過濾器(filter)

2021-10-09 15:15:05 字數 1655 閱讀 1847

vue中的過濾器分為兩種:區域性過濾器全域性過濾器

過濾器就是乙個資料經過了這個過濾器之後出來另一樣東西

全域性過濾器通過vue.filter('filtername',fliterfn)來定義,它定義好了之後,在所有的元件內都可以使用.

// global-filter是過濾器名稱

// 函式第乙個引數是需要過濾的資料.

// 函式第二個引數是給過濾器傳遞的值.

vue.

filter

('global-filter'

,(val,

...args)

=>`)

return val +

' 過濾器追加的資料'

})

new

vue(

)

>

>

}p>

div>

}oldvalue的值原封不動的傳遞給global-filter

global-filter方法定義裡,第乙個引數val就是oldvalue

區域性過濾器,定義在元件內部filters屬性上.它只能在此元件內部使用.

newvue(,

methods:

,// 定義元件過濾器

filters:}}

)注意:全域性註冊時是filter,沒有s的。而區域性過濾器是filters,是有s的,這要注意了,雖然你寫的時候沒有s不報錯,但是過濾器是沒有效果的

1.在雙花括號插值

}

2.在v-bind表示式中使用

v-bind:data="

'ok' | globalfilter"

>

div>

3.過濾器的連用

}

上述**中,message是作為引數傳給filtera 函式,而filtera 函式的返回值作為引數傳給filterb函式,最終結果顯示是由filterb返回的。

>

}div

>

new

vue(

, filters:

,lastfilter

(val)}}

)//結果:2023年好

1.

}//filtera的第乙個引數是message,依次是『arg1』,arg2

}<

/div>

filters:

}//結果:2020-12-28

2.

}}<

/div>

filters:

}//結果:hello world

vue中filter 過濾器

區域性過濾器,只有當前vue例項裡能使用 data filters return statusmap status tofixed2 num 全域性過濾器,在任何vue例項裡都能使用vue.filter adddanwei value data 上面寫法中要注意的問題是 全域性註冊時時是filter...

Vue中的Filter過濾器

home time div 使用過濾器 div template import moment from moment 引入外掛程式 export default filters script 在 main.js 檔案裡註冊過濾器 import vue from vue import router f...

Vue中的過濾器(filter)

什麼是過濾器?顧名思義,過濾器就是就對資料進行篩選 過濾 格式化,比如時間格式化 英文大小寫轉換 狀態轉換等等。它與methods computed 或者 watch不同是,它不能改變原始值。過濾器分類 1 元件內過濾器 元件內過濾器就是通過filters屬性,該屬性是乙個物件,在該物件中可以定義多...