vue中使用過濾器filters的this為undefined的問題
更新時間：2022年01月23日 14:09:01 作者：HonGL54
這篇文章主要介紹了vue中使用過濾器filters的this為undefined的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用過濾器filters的this為undefined
vue中的過濾器更偏向于對文本數(shù)據(jù)的轉(zhuǎn)化，而不能依賴this上下文，如果需要使用到上下文this我們應(yīng)該使用computed計算屬性的或者一個method方法
vue filter過濾器的用法
{undefined{ args | filterFun }} |是管道符 用法如下
{{ time | formatDate }}過濾器中
filters: {
? ? ? ? formatDate: value => {
?? ??? ? ? let date = new Date(value)
?? ??? ? ? let y = date.getFullYear()
?? ??? ? ? let MM = date.getMonth() + 1
?? ??? ? ? MM = MM < 10 ? "0" + MM : MM
?? ??? ? ? let d = date.getDate()
?? ??? ? ? d = d < 10 ? "0" + d : d
?? ??? ? ? let h = date.getHours()
?? ??? ? ? h = h < 10 ? "0" + h : h
?? ??? ? ? let m = date.getMinutes()
?? ??? ? ? m = m < 10 ? "0" + m : m
?? ??? ? ? let s = date.getSeconds()
?? ??? ? ? s = s < 10 ? "0" + s : s
?? ??? ? ? return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s
?? ??? ?}
? ? }time 相當(dāng)于想要過濾的值 傳遞給formatDate的參數(shù)
也可以多參數(shù) {undefined{ time | formatDate(“嘿哈”) }}
這時過濾器中
//time 傳遞給 value ? ?"嘿哈" 傳遞給 arg1
formatDate: (value,arg1) => {
?? ?......
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue translate peoject實現(xiàn)在線翻譯功能【新手必看】
這篇文章主要介紹了vue translate peoject實現(xiàn)在線翻譯功能，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue2.0 實現(xiàn)富文本編輯器功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue項目打包后網(wǎng)頁的title亂碼解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3 Element Plus表單自定義校驗的實現(xiàn)全過程
這篇文章主要介紹了Vue3 Element Plus表單自定義校驗的實現(xiàn)全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
本篇文章主要介紹了詳解vue2.0組件通信各種情況總結(jié)與實例分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家介紹了vue實現(xiàn)列表展示的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue實現(xiàn)el-select 觸底分頁+遠程搜索的示例
有的時候數(shù)據(jù)量比較大,比如幾千甚至上萬條的時候,如果直接賦值,整個頁面的 dom 會被撐爆,本文主要介紹了vue實現(xiàn)el-select 觸底分頁+遠程搜索的示例,具有一定的參考價值,感興趣的可以了解一下2023-12-12
詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點
本篇文章主要介紹了詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了vue組件開發(fā)之slider組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
在Electron環(huán)境下,截屏功能相對強大,可以通過desktopCapturer獲取應(yīng)用視頻流,實現(xiàn)對整個應(yīng)用的截屏,而在非Electron環(huán)境下,截屏功能受限,只能截取瀏覽器內(nèi)容,且存在iframe或base64圖片加載問題2024-10-10