vue电话号码,姓名,身份证号快速格式化隐藏
vue项目中你还在调用方法将15711112222=>157****2222吗?
vue过滤器将极大简化这个过程。
先看看最后的使用效果
{{15711112222 | phone}}
只需要在html页面里这样表示,效果图
先创建一个pipe.js,我将其称之为管道
const Vue = require('vue');/** * 匹配电话号码 * 15012341234 => 150****1234 */Vue.filter('phone', function (value) { if (!value) return ''; let str = value; str = str.toString().replace(/^(d{3})(d{4})(d{4})/g , '$1****$3') return str;})/** * 匹配名字 * 王仙女 => zxdqc */Vue.filter('name', function (value) { if (!value) return ''; let str = value; str = str.toString().replace(/^([^x00-xff])([^x00-xff]{0,})([^x00-xff])/g , '$1*$3') return str;})export default { init () { console.log('*** filter installed ***') }} 在将其放到全局里引入 main.js vue.use(pipe)