vue的关于过滤器使用

这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战

vue的关于过滤器使用

vue 2.0 的开发中我们有时候需要对一些渲染返回的数据进行特别的处理，比如时间的格式化、数字的浮点值计算四舍五入等等的处理，如果只有一两个还好，但是批量进行数据渲染的时候就要用到vue的过滤器filters，可以使用页面的管道符来进行数据的处理，这样就可以进行多地方的引入使用，方便快捷。下面我们就来聊聊过滤器的方法和使用。

一、注册过滤器Vue.filter()

使用Vue.filter()可以注册一个自定义的过滤器来方便我们使用。比如一个数值的浮点数的处理的过滤器

filters:{
    accuracyDust(value){
      let str = Math.round(value*100)
      return str
    }
},

从上面可以看到，accuracyDust是过滤器的名称，也是引用的名称；value就是需要处理的参数。页面的使用如下：

<el-col :span="6">{{ item.number | accuracyDust }}%</el-col>

二、双向过滤器

上面的是常规的过滤器的使用，显示我们来说说双向的过滤器。双向，其实就是对v-model的参数进行处理转化

<input v-model="input | accuracyDust" placeholder="请输入比例"></input>

但是因为这种过滤器的使用导致很多其他的情况，所以在vue2.0之后取消了这种情况，所以现在的过滤器只能在{{}}里面的数据进行使用过滤器。

三、过滤器的使用实例

1.关于姓名文字的打码显示

formatName (value) {
      if (!value) return '';
      let str = value;
      if(str.length == 2){
        str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g , '$1*')
      }else if(str.length == 3){
        str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g , '$1*$3')
      }else if(str.length == 4){
        str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,2})([^\x00-\xff])/g , '$1**$3')
      }else if(str.length > 4){
        str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,3})([^\x00-\xff])/g , '$1***$3')
      }else{}
      // str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{1,3})([^\x00-\xff])/g , '$1**$3')
      return str;
    }

2.电话号码打码显示

formatPhone (value) {
  if (!value) return '';
  let str = value;
  str = str.toString().replace(/^(\d{3})(\d{4})(\d{4})/g , '$1****$3')
  return str;
})

3.身份证号码的打码

formatIDcard (value) {
  if (!value) return '';
  let str = value;
  str = str.toString().replace(/^(.{6})(?:\w+)(.{4})$/ , '$1********$2')
  return str;
})

4.时间的格式化。我的时间格式化使用比较多，所以我单独写了一个js文件，然后引入，进行使用

date.js

export function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
    }
  }
  return fmt;
}
​
function padLeftZero(str) {
  return ('00' + str).substr(str.length);
}

引入使用

import {formatDate} from '@/common/date.js'
filters: {
    formatDate(time) {
      time = time * 1000
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm')
    }
  },

\