美文网首页
vue项目全局过滤器与组件内部过滤器 filter

vue项目全局过滤器与组件内部过滤器 filter

作者: 飞鹰_007 | 来源:发表于2020-09-06 19:00 被阅读0次

全局过滤器

1.mian.js同级目录下新建文件夹filter,文件夹下新建filter.js:

  let transformMobile=val=>{    //手机号码隐藏中间4位

       let mobile = val + '';

       if (mobile && mobile.length === 11) {

         const reg = /^(\d{3})\d{4}(\d{4})$/

         return mobile.replace(reg, '$1****$2')

       } else {

         return val

       }

  };

  export { transformMobile}

2.mian.js引入:

  import * as custom from './filter/filter';

  Object.keys(custom).forEach(key => {

    Vue.filter(key, custom[key])

  });

3.组件使用:

<div @click.stop>

   <a :href="'tel:' + mobile"> {{mobile| transformMobile}} </a>

</div>

data(){

      return{

        mobile: '13612345678',

      }

    }

注:以上示例显示结果: 136****5678

组件内部过滤器

<template>

    <div><span>{{type | transformType(typeList)}}</span></div>

  </template>

<script>

  export default {

    data(){

      return{

        type: 1,

        typeList:[    //接口获取的类型列表

            {typeName:'中国邮政', code:0},

            {typeName:'顺丰快递', code:1},

            {typeName:'中通快递', code:2}

        ],

      }

    },

    filters: {

        transformType(val,typeList){

            if(typeList.length>0){

                for(let i=0; i<typeList.length; i++){

                    if (typeList[i].code == val) {

                        return  typeList[i].typeName;

                    }

                }

            }else {

                return '未知'

            }

        }

    },

  }

  </script>

注:以上示例显示结果: 顺丰快递

相关文章

  • vue自定义过滤器

    Vue的自定义过滤器有两种:全局过滤器和内部过滤器全局过滤器定义在vue实例化之前 内部过滤器注册在实例内部,仅在...

  • 王龙

    过滤器div: {{123.456|ab}} 1全局过滤器: Vue.filter('abc'...

  • vue项目全局过滤器与组件内部过滤器 filter

    全局过滤器 1.mian.js同级目录下新建文件夹filter,文件夹下新建filter.js: let tra...

  • Vue-04

    过滤器:对显示在页面上的数据进行筛选 全局过滤器 和Vue同级 Vue.filter(“过滤器名称”,func...

  • [vue]--filters 过滤器

    vue 过滤器组件:用法 官方说明:filter地址

  • 3 Vue filter过滤器、样式动态改变 class、sty

    1、filter过滤器 ->全局Vue.filter();局部filters:{}; ->可连着调用多个 2、Vu...

  • vue 过滤器

    过滤器:让要显示在页面上的内容进行重新筛选 全局过滤器:语法: Vue.filter('过滤器的名字',funct...

  • VUE第四天学习

    一、全局过滤器 在/src/main.js中Vue实例化之前进行定义 定义好的全局过滤器,在项目中的任意组件中可以...

  • Javaweb之Filter案例练习-项目全局编码过滤器

    Filter全局编码过滤器 这篇来做一个Filter在全局编码过滤器练习,这篇新建一个web项目来做练习。 web...

  • vue常用特性应用场景

    1 过滤器 Vue.filter 定义一个全局过滤器 2 自定义指令 让表单自动获取焦点 通过Vue.direc...

网友评论

      本文标题:vue项目全局过滤器与组件内部过滤器 filter

      本文链接:https://www.haomeiwen.com/subject/gimlektx.html