vue过滤器filter的使用

时间：2023-04-01 12:11:09 vue.js

vue2.0之前，内置了一个过滤器。2.0中没有内置过滤器，但是我们可以自定义过滤器。关于vue的过滤器，在官方文档中是这样解释的：Vue.js允许自定义过滤器，可以用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式（后者从2.1.0+开始支持）。应在JavaScript表达式的末尾添加过滤器，用“管道”符号表示。也就是说，过滤器是用于格式化数据的函数。过滤器不会修改原始数据。它的作用是对数据进行过滤，也就是对数据进行处理，并将处理后的数据返回，比如做一些数据格式修改，状态转换等。过滤器分为两种：组件内过滤器（组件内有效）全局filters(所有组件共享)定义过滤器，第一个参数是过滤器的名称，第二个参数是过滤器的功能（如果没有定义Vue不知道这个字符串是什么以及它做什么）。过滤函数声明function(data,argv1,argv2...){}第一个参数是要过滤的传入数据，即调用时管道符号左边的内容。第二个参数是调用过滤器时传入的参数。filter的使用先注册，然后在组件filters中使用：{filtername:fn}通过returninfn返回最终数据GlobalVue.filter('filtername',fn)通过return返回fn中最终数据返回使用{{数据|filtername}}//使用过滤器时，需要添加管道符号（|）作为分隔符，管道符号的右边|是过滤器名称，是文本的函数函数{{message|过滤器名称}}

自定义全局过滤器Vue.filter('filtername',function(val){//val代表要处理的数据//过滤业务逻辑，必须有返回值})

Partialfilterdata(){return{msg:'helloworld'}},//定义私有部分过滤器。过滤器只能在当前vue对象中使用：{dataFormat:(msg,a)=>{//msg代表要过滤的数据，a代表传入参数returnmsg+a;}}

//结果：你好世界！注意：全局注册时，有没有s的filter，而组件filter是有s的filters，虽然没有s写的时候报错，但是filter没有作用。当全局过滤器和局部过滤器的名称重复时，会按照就近原则调用，即先调用局部过滤器再调用全局过滤器。一个表达式可以使用多个过滤器，执行顺序是从左到右。前一个过滤器的结果是后一个过滤器处理后的数据，所以要注意使用顺序。熟悉Vue的童鞋就会知道，过滤器有时可以达到和methods、computed、watch一样的处理数据的目的，但是不能代替它们。他们，因为它不能改变原来的价值。如果filter内部特别复杂，可以考虑写成computedproperty，因为computedproperty本身有缓存，复用性强，而filter一般用来做一些简单的操作。在实际开发中，全局过滤器比局部过滤器使用更广泛。说白了，我们为什么要使用过滤器其实和使用函数是一样的，把一些方法封装起来供其他组件使用，这样调用起来更方便、更快捷。大家都知道全局的filter是定义在main.js中的，但是万一项目太大，有多个filter，那main.js就是一堆代码。为了将项目模块化，最好有一个专门的目录来统一存放这些过滤器，然后提取处理函数，放在.js文件中，通过下面的示例代码展示。示例1（部分过滤器）格式化时间或日期，补齐指定位数，不足一位补0//filter/index.js文件exportdefault{dateFormat:value=>{constdt=newDate(value*1000)consty=dt.getFullYear()constm=(dt.getMonth()+1+'').padStart(2,'0')//.padStart(指定位数,"要完成的符号或值")constd=(dt.getDay()+'').padStart(2,'0')consthh=(dt.getHours()+'').padStart(2,'0')constmm=(dt.getMinutes()+'').padStart(2,'0')constss=(dt.getSeconds()+'').padStart(2,'0')返回`${y}-${m}-${d}${hh}:${mm}:${ss}`}}//在.vue文件中使用本地过滤器

日期：{{date|dateFormat}}

例2（全局过滤）通用字典项的回显：比如性别，男或女，或者通用选择，后台传给我们的数据是0、1，我们需要显示男和female在页面上或者//constants/dictionary.jsfileexportconstGENDER_MENU=[{code:0,label:'男'},{code:1,label:'女'}];exportconstCOMMON_MENU=[{code:0,label:'No'},{code:1,label:'Yes'}];exportdefault{GENDER_MENU,COMMON_MENU}filter/dict.jsfile//filter/dict.jsfileimportDictfrom'../constants/dictionary'exportconstgenderMenu={func:value=>{consttarget=Dict.GENDER_MENU.filter(item=>{returnitem.code===value;})returntarget.length？目标[0].标签：价值；}}exportconstcommonMenu={func:value=>{consttarget=Dict.COMMON_MENU.filter(item=>{returnitem.code===value;})returntarget.length?目标[0].标签：价值；}}filter/index.jsfile//filter/index.jsFileimport*asfiltersfrom'./dict'//importfilterfunctionconstInstall=Vue=>{//importfilters是一个对象，使用Object.keys()方法得到一个由key组成的数组，遍历数据，让key为全局filter的名字，下面是key对应的处理函数，这样全局filter就可以在任何组件中使用Object.keys(过滤器).forEach(key=>{Vue.filter(key,filters[key].func)})/*for(const_filterinfilters){Vue.filter(`${_filter}`,filters[_filter].func)}*/}exportdefaultInstallmain.jsfile//main.jsfile......importfiltersfrom'./../filter/index'Vue.use(filters)......在.vue文件中使用全局过滤//.vue文件中使用的全局过滤器

Gender:{{gender|性别菜单}}