vue2.0 自定义过滤器（filter）实例

最新推荐文章于 2024-06-03 21:37:55 发布
最新推荐文章于 2024-06-03 21:37:55 发布
阅读量3.4k 收藏 9
点赞数
分类专栏： vue

一、过滤器简介

（1）过滤器创建
　　过滤器的本质 是一个有参数 有返回值的方法

1
2
3
4
5
6
7
new  Vue({
   filters:{
     myCurrency: function (myInput){
       return  处理后的数据
     }
   }
})

（2）过滤器使用
语法：

1
< any >{{表达式 | 过滤器}}</ any >

举个例子：

1
< h1 >{{price | myCurrency}}</ h1 >

（3）过滤器高级用法

在使用过滤器的时候，还可以指定参数，来告诉过滤器按照参数进行数据的过滤。

①如何给过滤器传参？

1
< h1 >{{price | myCurrency('￥',true)}}</ h1 >

②如何在过滤器中接收到？

1
2
3
4
5
6
7
8
9
10
new  Vue({
   filters:{
     //myInput是通过管道传来的数据
     //arg1在调用过滤器时在圆括号中第一个参数
     //arg2在调用过滤器时在圆括号中第二个参数
     myCurrency: function (myInput,arg1,arg2){
       return  处理后的数据
     }
   }
})

 

二、封装  自定义过滤器

filters.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
/**
  * 自定义过滤器
  */
import  Vue from  'vue'
 
/**
  * 制保留2位小数
  * 例如：2，会在2后面补上00.即2.00
  */
Vue.filter( 'toDecimal2' , x => {
   var  f = parseFloat(x);
   if  (isNaN(f)) {
     return  false ;
   }
   var  f = Math.round(x * 100) / 100;
   var  s = f.toString();
   var  rs = s.indexOf( '.' );
   if  (rs < 0) {
     rs = s.length;
     s +=  '.' ;
   }
   while  (s.length <= rs + 2) {
     s +=  '0' ;
   }
   return  s;
});
 
/**
  * 获取两位小数部分
  * 例如：11.05，返回 '05'
  * 如果是整数，返回 '00'
  */
Vue.filter( 'getDecimalPart' , x => {
   var  f = parseFloat(x);
   if  (isNaN(f)) {
     return  false ;
   }
   var  f = Math.round(x * 100) / 100;
   var  s = f.toString();
   var  rs = s.indexOf( '.' );
   if  (rs < 0) {
     rs = s.length;
     s +=  '.' ;
   }
   while  (s.length <= rs + 2) {
     s +=  '0' ;
   }
   return  s.split( "." )[1];
});
 
/**
  * 金额格式化
  * fmtMonty(2,'.', ',')后两个可省略
  */
Vue.filter( 'fmtMoney' , (number, decimals, dec_point, thousnds_stp) => {
   /*
    * 参数说明：
    * number：要格式化的数字
    * decimals：保留几位小数
    * dec_point：小数点符号
    * thousands_sep：千分位符号
    * */
   number = (number +  '' ).replace(/[^0-9+-Ee.]/g,  '' );
   var  n = !isFinite(+number) ? 0 : +number,
     prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
     sep = ( typeof  thousnds_stp ===  'undefined' ) ?  ','  : thousnds_stp,
     dec = ( typeof  dec_point ===  'undefined' ) ?  '.'  : dec_point,
     s =  '' ,
     toFixedFix =  function  (n, prec) {
       var  k = Math.pow(10, prec);
       return  ''  + Math.ceil(n * k) / k;
     }
   s = (prec ? toFixedFix(n, prec) :  ''  + Math.round(n)).split( '.' );
   var  re = /(-?\d+)(\d{3})/;
   while  (re.test(s[0])) {
     s[0] = s[0].replace(re,  "$1"  + sep +  "$2" );
   }
 
   if  ((s[1] ||  '' ).length < prec) {
     s[1] = s[1] ||  '' ;
     s[1] +=  new  Array(prec - s[1].length + 1).join( '0' );
   }
   return  s.join(dec);
 
});
 
/**
  * 名字，身份证，银行卡，隐藏部分数字变‘*’号
  * plusXing(前面保留位数，后面保留位数）
  */
Vue.filter( 'plusXing' , (str, frontLen, endLen) => {
   var  len = str.length - frontLen - endLen;
   var  xing =  '' ;
   for  ( var  i = 0; i < len; i++) {
     xing +=  '*' ;
   }
   return  str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
});
 
/**
  * 银行卡号四个数字分割
  */
Vue.filter( 'formartCode' , n => {
   var  b = parseInt(n).toString();
   var  len = n.length;
   if  (len <= 4) {
     return  n;
   }  else  {
     var  r = len % 4;
     return  r > 0 ? b.slice(0, r) +  ","  + b.slice(r, len).match(/\d{4}/g).join( "," ) : b.slice(r, len).match(/\d{4}/g).join( " " );
   }
});
 
/**
  * 借款、还款完成过滤
  */
Vue.filter( 'complateState' , n => {
   switch  (n) {
     case  0:
       return  '借款' ;
     case  1:
       return  '还款' ;
     case  2:
       return  '逾期记录'
   }
});
 
/**
  * 借款状态过滤器
  */
Vue.filter( 'borrowStateFilter' ,  function  (data) {
   switch  (data) {
     case  'SETTING' :
       return  "审核中" ;
     case  'FAIL' :
       return  "放款失败" ;
     case  'NORM' :
       return  "使用中" ;
     case  'OVER' :
       return  "已逾期" ;
     case  'DELQ' :
       return  "已逾期" ;
     case  'OFFED' :
       return  "核销" ;
     case  'CLSDB' :
       return  "关闭" ;
     case  'SETL' :
       return  "已结清"
   }
});
 
/**
  * 还款状态过滤器
  */
Vue.filter( 'repaymentStateFilter' ,  function  (data) {
   switch  (data) {
     case  '00' :
       return  "还款成功" ;
     case  '01' :
       return  "还款失败" ;
     case  '02' :
       return  "还款中" ;
   }
});
 
/**
  * 银行小图标
  */
Vue.filter( 'bankLogoUrl' ,  function  (data) {
   var  imgUrl =  "static/img/" ;
   switch  (data) {
     case  '上海银行' :
       return  imgUrl +  'shbank.png' ;
     case  '中信银行' :
       return  imgUrl +  'zxbank.png' ;
     case  '中原银行' :
       return  imgUrl +  'zybank.jpeg' ;
     case  '中国银行' :
       return  imgUrl +  'boc.png' ;
     case  '中国建设' :
       return  imgUrl +  'ccb.png' ;
     case  '交通银行' :
       return  imgUrl +  'jtbank.png' ;
     case  '光大银行' :
       return  imgUrl +  'gdbank.png' ;
     case  '兴业银行' :
       return  imgUrl +  'xybank.png' ;
     case  '农业银行' :
       return  imgUrl +  'abc.png' ;
     case  '工商银行' :
       return  imgUrl +  'icbc.png' ;
     case  '平安银行' :
       return  imgUrl +  'pabank.png' ;
     case  '广发银行' :
       return  imgUrl +  'gfbank.png' ;
     case  '建设银行' :
       return  imgUrl +  'ccb.png' ;
     case  '招商银行' :
       return  imgUrl +  'cmb.png' ;
     case  '民生银行' :
       return  imgUrl +  'msbank.png' ;
     case  '浦东发展' :
       return  imgUrl +  'pdbank.png' ;
     case  '邮储银行' :
       return  imgUrl +  'ycbank.png' ;
     case  '邮政储蓄' :
       return  imgUrl +  'ycbank.png' ;
   }
});
 
/**
  * (利息等的)费率
  */
Vue.filter( 'rate' ,  function  (data) {
   if  (data) {
     data = data.toString();
     console.log(data);
     var  intS = data.substring(0, data.indexOf( '.' )) + data.substring(data.indexOf( '.' ) + 1, data.indexOf( '.' ) + 3);
     var  floatS = data.substring(data.indexOf( '.' ) + 3, data.indexOf( '.' ) + 7);
     while  (floatS.length < 4) {
       floatS = floatS +  '0' ;
     }
     return  parseInt(intS) +  '.'  + floatS +  '%' ;
   }
   return  '' ;
});
 
/**
  * 时间过滤
  * fmtDate('yyyy,MM,dd')
  */
Vue.filter( 'fmtDate' , (date, fmt) => {
     var  o = {
       'M+' : date.getMonth() + 1,  // 月份
       'd+' : date.getDate(),  // 日
       'h+' : date.getHours(),  // 小时
       'm+' : date.getMinutes(),  // 分
       's+' : date.getSeconds(),  // 秒
       'q+' : Math.floor((date.getMonth() + 3) / 3),  // 季度
       'S' : date.getMilliseconds()  // 毫秒
     };
     if  (/(y+)/.test(fmt)) {
       fmt = fmt.replace(RegExp.$1, (date.getFullYear() +  '' ).substr(4 - RegExp.$1.length));
     }
     for  ( var  k  in  o) {
       if  ( new  RegExp( '('  + k +  ')' ).test(fmt)) {
         fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (( '00'  + o[k]).substr(( ''  + o[k]).length)));
       }
     }
     return  fmt;
   }
);
 
/**
  * 时间过滤
  * date:'yyyy-MM-dd'
  */
Vue.filter( 'fmtDateStr' , (date) => {
   if (!date)  return  '' ;
   var  temp = date.split( " " )[0].split( "-" );
   return  temp.join( "/" );
});
Vue.filter( 'fmtDateStr2' , (date) => {
   if (!date)  return  '' ;
   var  temp = date.split( " " )[0].split( "-" );
   return  temp[0] +  "年"  + temp[1] +  "月"  + temp[2] +  "日" ;
});
Vue.filter( 'fmtTimeStr' , (date) => {
   if (!date)  return  '' ;
   var  temp = date.split( " " )[0].split( "-" );
   return  temp.join( "/" ) +  " "  + date.split( " " )[1];
});
Vue.filter( 'fmtTimeStr2' , (date) => {
   if (!date)  return  '' ;
   var  temp = date.split( " " )[0].split( "-" );
   return  temp[0] +  "年"  + temp[1] +  "月"  + temp[2] +  "日"  +  " "  + date.split( " " )[1];
});
 
/**
  * 当前日期过滤器
  * new Date() --> ××年××月××日
  */
Vue.filter( 'fmtCurrentDate' , (date) => {
   return  date.getFullYear()+ '年' +(date.getMonth()+1)+ '月' +date.getDate()+ '日' ;
});
 
/**
  * 当前时间过滤器
  * new Date() --> ××:××
  */
Vue.filter( 'fmtCurrentTime' , (date) => {
   var  minutes;
   if (date.getMinutes() < 10){
     minutes =  '0'  + date.getMinutes();
   } else {
     minutes = date.getMinutes();
   }
   return  date.getHours() +  ':'  + minutes;
});
 
/**
  * 格式化时间为年、月、日、小时、分钟、刚刚
  */
Vue.filter( 'fmtDate2' , (time) => {
   let  oldDate =  new  Date(time)
   let  newDate =  new  Date()
   var  dayNum =  "" ;
   var  getTime = (newDate.getTime() - oldDate.getTime())/1000;
 
   if (getTime < 60*5){
     dayNum =  "刚刚" ;
   } else  if (getTime >= 60*5 && getTime < 60*60){
     dayNum = parseInt(getTime / 60) +  "分钟前" ;
   } else  if (getTime >= 3600 && getTime < 3600*24){
     dayNum = parseInt(getTime / 3600) +  "小时前" ;
   } else  if (getTime >= 3600 * 24 && getTime < 3600 * 24 * 30){
     dayNum = parseInt(getTime / 3600 / 24 ) +  "天前" ;
   } else  if (getTime >= 3600 * 24 * 30 && getTime < 3600 * 24 * 30 * 12){
     dayNum = parseInt(getTime / 3600 / 24 / 30 ) +  "个月前" ;
   } else  if (time >= 3600 * 24 * 30 * 12){
     dayNum = parseInt(getTime / 3600 / 24 / 30 / 12 ) +  "年前" ;
   }
 
   // 位数为1,补全0
   function  addZero(val){
     if (val < 10){
       val =  '0'  + String(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;
});

调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- 自定义 过滤器 -->
<template>
   <div>
     <!-- 标题栏 -->
     <mt-header title= "自定义过滤器" >
       <router-link to= "/"  slot= "left" >
         <mt-button icon= "back" >返回</mt-button>
       </router-link>
     </mt-header>
     <!-- 内容 -->
     <div  class = "cont" >{{currentTime | fmtDate2}}</div>
   </div>
</template>
 
<script>
   export  default  {
     name:  'Filter' ,
     data(){
       return  {
         currentTime:  new  Date()
       }
     }
   }
</script>
 
<style lang= "less"  scoped>
   .cont{
     height: 30px;
     line-height: 30px;
     text-align: center;
     font-size: 16px;
   }
</style>

效果图：

wandoumm
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js学习 Item14 – 过滤器与自定义过滤器
小平果的欢乐谷
07-12 4372
基础类似于自定义指令，可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值：Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) <!-- 'abc' => 'cba' --> <span
案例--vue.filter
weixin_44462907的博客
04-20 489
阅读如下代码，写出代码的功能，输入和输出 Vue.filter('toThousandFilter', function(num){ return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ',')) }); 全局过滤器:我们可以直接在vue对象上使用filter方法...
Vue中的过滤器——filter()
最新发布
qq_63497385的博客
06-03 309
在 Vue.js 中，过滤器（Filters）是一种用于在文本数据被渲染到 DOM 之前对其进行格式化的功能。它们可以用在两个地方：mustache 插值和v-bind表达式。然而，请注意，从 Vue 2.x 开始，过滤器主要用于文本插值，并且在 Vue 3.x 中，过滤器已经被移除，因为它们的功能可以通过计算属性或方法来实现。
vue基础-过滤器(Filters)
jewels_w的博客
07-01 8620
vue过滤器使用方法以及应用场景
vue的过滤器filters
大前端
08-16 164
filters过滤器在vue中的用法
Vue过滤器filters
zhangxiaodui的博客
02-25 2万+
使用场景 用于一些常见的文本格式化。也许后端返回的数据格式并不是最终想要展示出来的，通过过滤器可以进行处理成自己想要展示出来的格式。由“管道”符号指示。 使用方式 1.双花括号插值 {{message | myFilter}} 2.v-bind表达式 <el-tag :type="message | myFilter"></el-tag> 3.vue的生命周期中，如用在methods方法中 this.$options.filters['这里是过滤器的名字']('过滤器的参数')
详解Vue自定义过滤器的实现
11-29
在Vue中，自定义过滤器是用于处理数据的一种机制，通常用于格式化或转换数据，使其更符合展示需求。本文将深入探讨如何在Vue中实现自定义过滤器。 一、全局注册自定义过滤器 1. 使用 `Vue.filter()` 方法来全局...
Vue2.0系列之过滤器的使用
08-27
虽然Vue2.0不再推荐使用内置过滤器，但仍然可以通过自定义过滤器的方式来实现类似的功能。本文将详细介绍如何在Vue2.0中创建和使用自定义过滤器。 首先，我们来了解一下过滤器的使用场景。过滤器通常应用于两种情况...
vue 过滤器filter实例详解
10-18
Vue.js 提供了内置的过滤器以及自定义过滤器功能，使得我们可以根据项目需求定制自己的数据处理逻辑。 过滤器的使用方式主要有两种： 1. **管道操作符**：在模板中的双大括号 {{ }} 内，通过管道操作符（|）来调用...
vue的过滤器filter实例详解
12-09
排版记录，点耽误时间，我就简单的来，下面是一个vue 过滤器的写法，demo 演示，限制一个字符串的长度。 vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍： ...
vue封装常用过滤器
WangYi0118的博客
07-15 411
1:在static/plugins/新建filter.js 2:main.js // 全局导入过滤器 import filter from './static/plugins/filter' Object.keys(filter).forEach(key => Vue.filter(key, filter[key])) 3:filter.js // 封装过滤器 // 根据身份证号码判断男女 let sexFilter = value => { if (!value) {
vue之filter
田兴的博客
12-18 3060
过滤器就是一个数据经过了这个过滤器之后出来另一样东西。 vue中的过滤器分为两种：局部过滤器和全局过滤器 全局过滤器 // global-filter是过滤器名称 // 函数第一个参数是需要过滤的数据. // 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:...
vue封装全局过滤器
zhuzhucaicai的博客
02-21 598
1.创建一个filters.js文件，并在文件中定义过滤器函数 //性别过滤器 function sex (value) { if (value == 0) { return "男" } else if (value == 1) { return "女" } else if (value == 2) { return "保密" } } //导出 export { sex }; 2.在main.js中引入并使用 //全局过滤器 i
vue中如何封装过滤器filter
liuyuhua666的博客
07-04 870
在vue-cli脚手架里面的src文件下面创建一个filter文件夹，里面再创建一个index.js文件 然后在index里面写入过滤器方法 index.js： function filterOne(n) { return n + 10; } function filterTwo(n, m) { return n + m + 5; } export { filterOne, fil...
vue中过滤器filter的全局封装和使用
sunlizhen的专栏
05-14 2871
1.在vue项目的 src/ 文件夹下新建一个文件夹为 plugins，然后在 plugins/ 下新建 filter.js 文件，写入如下代码 2.在vue项目的main.js 文件，写入如下代码 方便你复制~~~~ import filter from './plugins/filter' // 全局导入过滤器 Object.keys(filter...
js方法
aiaoming5989的博客
04-24 211
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 NumberObject.toFixed(num) num必需。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替。 转载于:https://www.cnblogs.com/zhangjunlong/p/8931826.html...
vue项目中，封装一个全局过滤器，用来过滤时间
weixin_47700309的博客
10-22 665
在Vue项目中，封装一个全局过滤器filter 需求如下： 我们在动态渲染数据的时候，需要把 2019-10-15T07:20:47.000Z 改变成 2019-10-15 在页面中显示 步骤如下： 1.先封装一个全局过滤器filter // 封装项目中所需要使用的全局过滤器 // 过滤器的本质是函数 export const dateFormat = (value, spe = '-') => { let year = value.getFullYear() let month
vue2.0过滤器filter全局和局部及传参
Asuria
07-27 1万+
首先说全局，至少传一个本身的值。 &lt;div id="app"&gt; {{message | demo}} &lt;/div&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;script&gt; // 全局 // 这
vue filter( ) 过滤数组方法
热门推荐
weixin_41796631的博客
10-02 7万+
要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据（非变异方法）。可以使用filter( ) 方法。 &lt;div id="div"&gt; &lt;li v-for="n in evenNumbers"&gt;{{ n }}&lt;/li&gt; &lt;/div&gt; &lt;script&gt; varvm=new Vue({ el:"#div&qu
vue2怎么自定义过滤器
04-04
1. 全局过滤器：在 Vue 实例化之前定义全局过滤器，可以在任何组件中使用。 ```javascript // 定义全局过滤器 Vue.filter('toUpper', function (value) { if (!value) return '' value = value.toString() ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值