vue2 0 自定義過濾器(filter)例項

2021-09-07 16:05:53 字數 3936 閱讀 2524

一、過濾器簡介

(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...