Vue學習 深入剖析過濾器

2021-10-09 08:33:08 字數 1819 閱讀 1843

自定義過濾器,用於一些常見的文字格式化。

過濾器可用在兩個地方:雙花括號插值 和 v-bind 表示式,新增在js表示式的尾部,由「管道」符號表示:

}v-bind:id

="id | filter"

>

div>

全域性過濾器:

vue.

filter

('filter1',(

)=>);

<

/script>

區域性過濾器:

const vm =

newvue(,

filters:})

;<

/script>

當過濾器形式為msg | filter時,filter過濾器接收乙個引數,引數為msg

當過濾器形式為msg | filter('a')時,filter過濾器接收兩個引數,引數為msg, 'a'

>

}<

/div>

vue.

filter

('filter1'

,(val,a)

=>);

const vm =

newvue(}

);<

/script>

}

在這個例子中,filtera的引數為msg,filterb的引數為filtera,即filtera處理後將結果再交給filterb處理,最後返回。

>

}div>

>

vue.

filter

('filter1'

,(val)

=>

;return val.

charat(0

).touppercase()

+ val.

slice(1

);})

;const vm =

newvue(}

);script

>

>

}div>

>

vue.

filter

('tomoney'

,(value)

=>

;return value.

tolocalestring()

;});

const vm =

newvue(}

);script

>

>

}div>

>

vue.

filter

('addword'

,(value)

=>;if

(value >

10000

)return value;})

;const vm =

newvue(}

);script

>

vue學習 過濾器

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

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中過濾器

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