Vue過濾器的使用

2021-09-27 02:54:51 字數 724 閱讀 1861

官方文件

1.作用:

在我們頁面顯示值之前加一層過濾,展示我們過濾後的值

2.使用位置:

雙花括號插值和v-bind表示式,由管道符號 | 表示

3.使用語法:

}} 可以同時使用多個過濾器,後面過濾器的data就是前面表示式傳過來的值

3.v-bind:屬性=「變數名|過濾器名」

4.定義語法:

1.全域性定義

vue.filter(』過濾器名』,執行的函式)

2.區域性定義

filters這個是例項化vue的乙個引數,和data,methods平級的,裡面放的就是我們這個例項的私有過濾器

filters:

3.注意事項

函式的第乙個引數都是data,也就是我們要過濾的值。

過濾器可以自定義一些引數。

過濾器函式的返回值就是最終顯示的值

5.過濾器格式化日期案例

filters:-$

-$`;

}else-$

-$$:

$:$`

;}}}

額外知識

1.padstart()

這個是字串提供的方法,所以我們先要保證呼叫的地方是個字串

這個方法裡兩個引數

padend()

和上面用法一樣,這個是在後面補乙個值

vue過濾器的使用

很多時候我們從後台拿到的資料格式並不是我們想要的,比如時間,一般後台給的是時間戳,前端需要轉化為類似yyyy mm nn的形式,如果不是直接渲染資料,還是能夠使用moment包去轉化,如果是像在 中這種寫法還比較簡單,能夠對資料直接操作 而像需要直接渲染的可能就需要我們遍歷列表去乙個乙個修改,比較麻...

Vue 過濾器的使用

vue官方文件是這樣說的 vue過濾器用於格式化一些常見的文字。在實際專案中的使用 定義過濾器 在src定義乙個filter.js檔案,裡面定義過濾器函式,在最後要使用 exprot default 將定義的函式暴露出來 將時間戳轉化為日期格式 function formatdate value,f...

vue 過濾器是使用

1.過濾器可以用在兩個地方使用 雙花括號插值和v bind表示式 2.你可以在乙個元件的選項中定義本地的過濾器 filters 3.在建立 vue 例項之前全域性定義過濾器 vue.filter capitalize function value new vue 注意 1.在上述例子中,capita...