第一步:mian.js 中進行定義
vue.filter("moneyfilter", function(value, num, type) );
引數說明:
moneyfilter表示的是過濾器的名稱 函式中的引數解析:
value是通過管道傳來的資料 ,必須引數
num在呼叫過濾器時在圓括號中第乙個引數 ,選填引數
type在呼叫過濾器時在圓括號中第二個引數,選填引數
第二部:元件中使用自定義事件}
(專案中一般是另建檔案來定義各種過濾器,然後註冊在main.js中,main.js一般不寫邏輯**)
列子:建立customfilter.js檔案
一、 在customfilter.js檔案中寫入過濾器
//日期格式過濾器
let dateserver = value => )(\d)(\d)/g, "$1-$2-$3");
};//金額格式過濾器
let moneyfilter = (value, num, type) => ;
//時間格式過濾器
let datefilter = (input, format = "yyyy-mm-dd hh:mm:ss") => ;
if (/(y+)/.test(format))
format = format.replace(
regexp.$1,
(input.getfullyear() + "").substr(4 - regexp.$1.length)
);// 不夠2位的前面補0
for (var k in o)
if (new regexp("(" + k + ")").test(format))
format = format.replace(
regexp.$1,
regexp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
);return format;
};export ;
二、main.js 中註冊 全域性自定義指令
//引入檔案
import * as custom from "./common/filters/customfilter";
//註冊自定義過濾器,下列**是引用所有的自定義過濾器
object.keys(custom).foreach(key => );
三、元件中使用
Vue定義全域性時間過濾器
個人 vue獲取後台的時間資料時,伺服器端返回的時間大多時候都是毫秒型別,這樣是非常不美觀的,如下圖所示。因此我們可以設定乙個全域性的時間過濾器來美化時間的顯示形式。1.首先,我們現在main.js中定義乙個全域性的過濾器 originval 後台返回的毫秒 vue.filter dataforma...
Vue 過濾器案例(全域性過濾器和區域性過濾器)
doctype html en utf 8 viewport content width device width,initial scale 1.0 js vue 2.4.0 js script 過濾器 title head 兩個過濾器的名稱都為msgformat,但是控制不同作用,乙個是全域性的...
VUE中的全域性過濾器
語法如下 vue.filter id,definition id definition 在你的main.js檔案中 vue.filter money function value return value 在你的頁面使用 或者在你的filter資料夾下 整數留下2位 letmoney value r...