vue filter過濾器用法

2022-08-21 17:24:10 字數 1455 閱讀 6498

vue.js 允許你自定義過濾器,可被用於一些常見的文字格式化。過濾器可以用在兩個地方:雙花括號插值和v-bind表示式 (後者從 2.1.0+ 開始支援)。

}<

div

v-bind:id

="rawid | formatid"

>

div>

1、在乙個元件的選項中定義本地的過濾器:

filters: 

},

2、在建立 vue 例項之前全域性定義過濾器:

/*

* 時間戳轉換

*/vue.filter('datefilter', function

(value) )

/*eslint-disable no-new

*/new

vue(,

3、全域性定義過濾器:

(1) 新建 filters.js 檔案

(2) 在 main.js 中引入

(3) filters.js 中編寫方法

let statelist =[,,

,,

,]

for(let i in

statelist)

}}

(4) 過濾函式傳遞多個引數、多個過濾函式

<

template

>

<

div

class

="main-box"

>

<

h4 class

="mm0 pt10"

>過濾器使用

h4>

<

p>}

p>

<

p>}

p>

div>

template

>

<

script

>

export

default

},}script

>

//

過濾器傳參

exports.dictionary = (val, first, second) =>

exports.filter1 = (val) =>

exports.filter2 = (val) =>

vue filter過濾器的用法

前言 過濾器filter經常被用在文字的格式化。比如時間戳的轉化,符號的新增 分為區域性過濾器和全域性過濾器。種類一 區域性過濾器 寫在元件內部,供該元件使用 1.定義單個過濾器afterprice,給 新增符號 data filters 呼叫過濾器時可以不用傳入資料,預設第乙個引數即為該資料。即 ...

vue filter函式的用法 vue 過濾器

在vue1.0的時候其實是內建了過濾器的,但是考慮到好多過濾器並不一定會被開發所呼叫,所以把原本內建的過濾器就給去掉了,但是過濾器還是比較普遍的,所以我們從vue2.0之後就需要自己定義過濾器過濾器分為兩種,一種是區域性過濾器,一種全域性過濾器。所有的過濾器都是函式,並且引數為要過濾的資料。區域性過...

vue filter物件 vue 過濾器

在vue1.0的時候其實是內建了過濾器的,但是考慮到好多過濾器並不一定會被開發所呼叫,所以把原本內建的過濾器就給去掉了,但是過濾器還是比較普遍的,所以我們從vue2.0之後就需要自己定義過濾器過濾器分為兩種,一種是區域性過濾器,一種全域性過濾器。所有的過濾器都是函式,並且引數為要過濾的資料。區域性過...