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