vue筆記 5 過濾器

2021-09-11 19:10:04 字數 2536 閱讀 2322

vue允許在mustache插值和v-bind使用過濾器,用於對一些常見文字進行格式化。

過濾器是對原資料進行修改後再顯示,不會修改原資料的內容。

例如下面這段**:

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

src=

"">

script

>

head

>

>

>

>

}p>

div>

>

vue.

filter

('msgformat'

,function

(msg)

)var vm=

newvue(}

)script

>

body

>

html

>

原來資料中的msg是字串"this is a ****** test",經過過濾器後顯示為"this is a ****** page":

同時,還可以在過濾器中加入引數:

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

src=

"">

script

>

head

>

>

>

>

}p>

div>

>

vue.

filter

('msgformat'

,function

(msg,arg)

)var vm=

newvue(}

)script

>

body

>

html

>

上面這段**將過濾器中的引數替換原資料中的"text",最後顯示為:

此外,還可以在過濾器中新增多個引數:

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

src=

"">

script

>

head

>

>

>

>

}p>

div>

>

vue.

filter

('msgformat'

,function

(msg,arg,arg1)

)var vm=

newvue(}

)script

>

body

>

html

>

顯示效果為:

還可以同時使用多個過濾器:

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

src=

"">

script

>

head

>

>

>

>

}p>

div>

>

vue.

filter

('msgformat'

,function

(msg,arg,arg1)

) vue.

filter

('msgformat1'

,function

(msg,arg)

)var vm=

newvue(}

)script

>

body

>

html

>

顯示效果為:

Vue 過濾器案例(全域性過濾器和區域性過濾器)

doctype html en utf 8 viewport content width device width,initial scale 1.0 js vue 2.4.0 js script 過濾器 title head 兩個過濾器的名稱都為msgformat,但是控制不同作用,乙個是全域性的...

vue學習 過濾器

作用 過濾資料,一般是把伺服器返回的資料,過濾成符合頁面展示的資料 1.私有過濾器 vue.component login data function filters 2.共有過濾器 最好把vue.filter放在元件註冊之前 vue.filter toup function input,name ...

vue中過濾器

常用語文字的格式化,過濾器可用在兩個地方 雙括號插值和v bind 表帶式 用符號 表示,在雙括號的中 在 v bind 中 具體使用請參考vue官方文件 如果專案中使用的過濾器比較多,不妨單獨用乙個filter.js檔案用來專門寫過濾器,在main.js中新增如下 就可以將filter中過濾器全部...