一、過濾器簡介
(1)過濾器建立
過濾器的本質 是乙個有引數 有返回值的方法
new vue(
}})
(2)過濾器使用
語法:
}
舉個例子:
(3)過濾器高階用法
在使用過濾器的時候,還可以指定引數,來告訴過濾器按照引數進行資料的過濾。
①如何給過濾器傳參?
②如何在過濾器中接收到?
new vue(
}})
二、封裝 自定義過濾器
filters.js
/**
* 自定義過濾器
*/import vue from 'vue'
/** * 制保留2位小數
* 例如:2,會在2後面補上00.即2.00
*/vue.filter('todecimal2', x =>
var f = math.round(x * 100) / 100;
var s = f.tostring();
var rs = s.indexof('.');
if (rs < 0)
while (s.length <= rs + 2)
return s;
});/**
* 獲取兩位小數部分
* 例如:11.05,返回 '05'
* 如果是整數,返回 '00'
*/vue.filter('getdecimalpart', x =>
var f = math.round(x * 100) / 100;
var s = f.tostring();
var rs = s.indexof('.');
if (rs < 0)
while (s.length <= rs + 2)
return s.split(".")[1];
});/**
* 金額格式化
* fmtmonty(2,'.', ',')後兩個可省略
*/vue.filter('fmtmoney', (number, decimals, dec_point, thousnds_stp) =>
s = (prec ? tofixedfix(n, prec) : '' + math.round(n)).split('.');
var re = /(-?\d+)(\d)/;
while (re.test(s[0]))
if ((s[1] || '').length < prec)
return s.join(dec);
});/**
* 名字,身份證,銀行卡,隱藏部分數字變『*』號
* plusxing(前面保留位數,後面保留位數)
*/vue.filter('plusxing', (str, frontlen, endlen) =>
return str.substring(0, frontlen) + xing + str.substring(str.length - endlen);
});/**
* 銀行卡號四個數字分割
*/vue.filter('formartcode', n => else /g).join(",") : b.slice(r, len).match(/\d/g).join(" ");
}});
/** * 借款、還款完成過濾
*/vue.filter('complatestate', n =>
});/**
* 借款狀態過濾器
*/vue.filter('borrowstatefilter', function (data)
});/**
* 還款狀態過濾器
*/vue.filter('repaymentstatefilter', function (data)
});/**
* 銀行小圖示
*/vue.filter('banklogourl', function (data)
});/**
* (利息等的)費率
*/vue.filter('rate', function (data)
return parseint(ints) + '.' + floats + '%';
} return '';
});/**
* 時間過濾
* fmtdate('yyyy,mm,dd')
*/vue.filter('fmtdate', (date, fmt) => ;
if (/(y+)/.test(fmt))
for (var k in o)
}return fmt;
});/** * 時間過濾
* date:'yyyy-mm-dd'
*/vue.filter('fmtdatestr', (date) => );
vue.filter('fmtdatestr2', (date) => );
vue.filter('fmttimestr', (date) => );
vue.filter('fmttimestr2', (date) => );
/** * 當前日期過濾器
* new date() --> ××年××月××日
*/vue.filter('fmtcurrentdate', (date) => );
/** * 當前時間過濾器
* new date() --> ××:××
*/vue.filter('fmtcurrenttime', (date) => else
return date.gethours() + ':' + minutes;
});/**
* 格式化時間為年、月、日、小時、分鐘、剛剛
*/vue.filter('fmtdate2', (time) => else if(gettime >= 60*5 && gettime < 60*60)else if(gettime >= 3600 && gettime < 3600*24)else if(gettime >= 3600 * 24 && gettime < 3600 * 24 * 30)else if(gettime >= 3600 * 24 * 30 && gettime < 3600 * 24 * 30 * 12)else if(time >= 3600 * 24 * 30 * 12)
// 位數為1,補全0
function addzero(val)
return val;
} let year = olddate.getfullyear();
let month = olddate.getmonth()+1;
let day = olddate.getdate();
let hour = olddate.gethours();
let minute = olddate.getminutes();
let second = olddate.getseconds();
month = addzero(month);
day = addzero(day);
hour = addzero(hour);
minute = addzero(minute);
second = addzero(second);
return daynum+" "+year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
});
呼叫:
返回
}
效果圖:
Vue2 0自定義過濾器
先了解一下什麼是vue過濾器 vue在1.0中有許許多多的各種功能的過濾器 先建立乙個例項裡面寫上一些資料稍後使用 var vm new vue methods dom 結構中 幾個1.0中自帶的過濾器例子 limitby 迴圈陣列的時候顯示幾條資料,從那條 索引 開始顯示 filterby在所有的...
Springboot自定義過濾器Filter
前言 自己寫了個springboot專案,最近寫的功能越來越多,結合業務已經要寫過濾器filter來過濾處理一些請求。在網上看了幾篇部落格,總結如下 過濾器配置方式有兩種 1 通過 webfilter註解來配置 2 通過 bean註解來配置 第一步 首先自己先寫個過濾器類 myfilter,此類必須...
vue自定義過濾器
1.什麼是過濾器 過濾器就是乙個資料經過了這個過濾器之後出來另一樣東西。2.過濾器分為 全域性過濾器和區域性過濾器 global filter是過濾器名稱 函式第乙個引數是需要過濾的資料.函式第二個引數是給過濾器傳遞的值.vue.filter global filter val,args retur...