Vue 过滤器filters及基本用法，之数字中间加**的过滤器

矫情吗；* 2023-02-16 09:25 26阅读 0赞

[https://blog.csdn.net/weixin\_43787528/article/details/88065405?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase][https_blog.csdn.net_weixin_43787528_article_details_88065405_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase]

### 1、过滤器 ###

vue中没有替换相关的内置过滤器，可以自定义过滤器
    	
      组件内的过滤器+全局过滤器
    
    1、 {
       { message | testfilte}}  
    <td>{
       { 第一个是传的参数值 | 处理后的值}}</td>

匹配多个

//稽核内容
    filters: {
        auditFilter(result) {
          const auditMap = {
            1: '请购单服务周期查重',
            2: '请购单服务周期跨年',
            3: '请购单物资超配检验',
            4: '软件类人员稽核',
          };
          return auditMap[result];
        },
    },
    
    //使用
    <el-table-column label="稽核内容" width="180">
        <template slot-scope="scope">
                  {
       { scope.row.contentType | auditFilter }}
        </template>
    </el-table-column>

案例电话加\*号

<td>{
       {item.merchantNumber|MerchantsNumber}}</td>
    <td>{
       { 第一个是传的参数值 | 处理后的值}}</td>
    
    //数字中间加*号 value是传的参数值
      filters: {
        MerchantsNumber(value) {
          let start = value.slice(0, 3);
          let end = value.slice(-6);
          return `${start}******${end}`;
        }
      },

### 2、过滤器可以串联 ###

{
       { message | filterA | filterB }}
     在这个例子中，filterA 拥有单个参数，它会接收 message 的值，
     然后调用 filterB，且 filterA 的处理结果将会作为 filterB 的单个参数传递进来

[https_blog.csdn.net_weixin_43787528_article_details_88065405_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase]: https://blog.csdn.net/weixin_43787528/article/details/88065405?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase