vue 過濾器的使用整理記錄

2021-10-07 15:35:51 字數 1173 閱讀 4255

vue中過濾器是乙個比較常用的內容，而且用起來也是非常簡單方便的。

定義過濾器

在vue中定義過濾器可以分為區域性定義和全域性定義

區域性定義：即在元件內容定義，因此也只能在本元件中使用



export


default


}...


...}


<


/script>
全域性定義：全域性定義的過濾器可以全域性使用。

import vue from


'vue'


;// 定義乙個叫cap的全域性過濾器


vue.


filter


('cap'


,function


(value)


)
過濾器的使用

過濾器通常用在html內容中並且在}(雙花括號)中使用或者 v-bind 中使用,用 | (管道符)來分隔。如：



<


!-- 在雙花括號中 --


>


}<


/span>


<


!-- 在 `v-bind`


中 --


>


"message | cap"


>


<


/div>


<


/div>


<


/template>
補充：

1.過濾器是可以疊加使用的。如：



}<


/span>


<


/template>
上面的內容中使用的兩個過濾器，其效果可以理解為先使用 cap 過濾得到第乙個結果，在將得到的結果使用 cbp 過濾得到最終的結果。

2.過濾器的本質是乙個js函式，因此也可以接受引數的



}<


/span>


<


/template>
cap 這個過濾器將接收2個引數，第乙個引數為message，第二個引數為』test』，倘若有2個以上的引數則類推即可，而且無論如何第乙個引數必然是message(即管道符之前的那個變數)。

Vue過濾器的使用

官方文件 1.作用 在我們頁面顯示值之前加一層過濾，展示我們過濾後的值 2.使用位置 雙花括號插值和v bind表示式，由管道符號 表示 3.使用語法 可以同時使用多個過濾器，後面過濾器的data就是前面表示式傳過來的值 3.v bind 屬性 變數名 過濾器名 4.定義語法 1.全域性定義 vue...

vue過濾器的使用

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

Vue 過濾器的使用

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