VUE 常用自定義過濾器定義與使用

2021-08-20 23:38:50 字數 1287 閱讀 4783

vue2.x 不再支援自帶的過濾器,使用過濾器需要自定義

且過濾器只能使用在v-bind和雙花括號裡,以管道符 「|」隔開,引數類似於函式的形式 如:}

在src 資料夾中新建filters資料夾,資料夾裡面新建index.js檔案,用來宣告過濾器的實現方法並匯出

index.js檔案:

//預設時間

const normaltime = time =>

};//補零

const fillzero = num => ;

//帶引數

//貨幣形式

const currency = (value, unit, decimal) => $`;

};//首字母大寫

const capitalize = value => ;

//時間戳轉換為指定格式時間

const timeformat = (value, format) => -$-$ $:$:$`;

} if (format == "yyyy-mm-dd") -$-$`;

} if (format == "yyyy-mm") -$`;

} if (format == "mm-dd") :$`;

} if (format == "hh:mm") :$`;

} return result;

};export default ;

在main.js中將此檔案匯入,並定義過濾器

object.keys(filters).foreach(key => );
至此,其他地方就可以直接使用了

例如:

}
帶引數:
}
以上是專案中需要用到多個過濾器,且多次重複使用,可單獨於檔案中進行宣告管理,在main中引入,其他元件即可使用

當單個元件中使用時,可定義區域性元件使用:

區域性定義過濾器

export default 

},filters:

},methods:

}}

也可以再全域性中定義:以便使用,以首字母大寫為例:

vue.filter('capitalize',function(value))
以下為新用到的過濾器實現方法:(會不定時增加)

vue自定義過濾器

1.什麼是過濾器 過濾器就是乙個資料經過了這個過濾器之後出來另一樣東西。2.過濾器分為 全域性過濾器和區域性過濾器 global filter是過濾器名稱 函式第乙個引數是需要過濾的資料.函式第二個引數是給過濾器傳遞的值.vue.filter global filter val,args retur...

vue自定義過濾器filter

global filter是過濾器名稱 函式第乙個引數是需要過濾的資料.函式第二個引數是給過濾器傳遞的值.vue.filter global filter val,args return val 過濾器追加的資料 new vue p div 把oldvalue的值原封不動的傳遞給global fil...

vue的自定義過濾器

過濾器是乙個通過輸入資料,能夠及時對資料進行處理並返回乙個資料結果的簡單函式。vue有很多很便利的過濾器,過濾器通常會使用管道標誌 使用 td 雖然vuejs給我們提供了很多強有力的過濾器,但有時候還是不夠。值得慶幸的,vue給我們提供了乙個乾淨簡潔的方式來定義我們自己的過濾器,之後我們就可以利用管...