vue filter过滤器的使用（带实例解析）

待我称王封你为后i 2021-07-26 01:59 382阅读 0赞

[vue中过滤器的使用][vue]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
vue中过滤器分为全局跟组件内两种，此处使用的是组件内的过滤器。

filters: { 
    //过滤器的名称为dataFormat，处理的数据为msg，最终返回一个数据即可。
      dataFormat(msg) { 
        const attrList = [];
        for (var i = 0; i < msg.length; i++) { 
          attrList.push(msg[i].attributeValue);
        }
        return attrList;
      }
    }

使用方法：通过 原始数据 | 过滤器名称 的方式进行使用，也就是将原始数据通过此过滤器处理后返回的数据赋值给前面的属性。`AttrItem.attributeValues`是一个数组，数组中是一个个的对象，我想要把每个对象中的`attributeValue`都拿出来形成一个数组，此数组就是我需要给tag组件传递的数据。

<el-tag
     :id="AttrItem.id"
     :dynamic-tags="AttrItem.attributeValues | dataFormat"
     :image-need="AttrItem.imageNeed"
     @changeData="changeData"
     @singleSwitch="singleSwitch"
    />

[vue]: https://www.cnblogs.com/adouwt/p/9660862.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/a2de816921bd48048eae8149eba2209e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，382人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中过滤器filters的使用

组件内写法 filters:{ filter:function(data,arg1,arg2){ return ....

﹏ヽ暗。殇╰゛Y/ 2023年01月12日 11:49/ 0 赞/ 233 阅读

相关 vue 过滤器 filter

<body> <div id="app"> <input type="text" v-model='msg'> <div>{

超、凢脫俗/ 2023年01月08日 04:22/ 0 赞/ 200 阅读

相关 vue 过滤器 filters

过滤器通过某种逻辑统一修改多条数据过滤器分为局部过滤器和全局过滤器局部过滤器 new Vue({ el: ....

╰半橙微兮°/ 2022年11月29日 12:23/ 0 赞/ 263 阅读

相关 Vue.js中过滤器（filter）的使用

一. vue的过滤器是什么？ Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.

「爱情、让人受尽委屈。」/ 2022年11月03日 00:56/ 0 赞/ 276 阅读

相关 Vue中的过滤器（filter）

什么是过滤器？顾名思义，过滤器就是就对数据进行筛选、过滤、格式化，比如时间格式化、英文大小写转换、状态转换等等。它与methods、computed 或者 wa

野性酷女/ 2022年10月02日 11:54/ 0 赞/ 222 阅读

相关 SpringMVC 过滤器Filter使用解析

SpringMVC框架是一个成熟的优秀java web开发框架，学习研究框架设计有助于我们更好的理解和掌握spring MVC，设计和写出更符合的结构和代码 ![I

妖狐艹你老母/ 2022年08月05日 12:24/ 0 赞/ 172 阅读

相关 SpringMVC 过滤器Filter使用解析

转自 https://www.cnblogs.com/mfc-itblog/p/6854698.html SpringMVC框架是一个成熟的优秀Java web开发

太过爱你忘了你带给我的痛/ 2022年05月24日 22:07/ 0 赞/ 230 阅读

相关 vue filter过滤器的使用（带实例解析）

[vue中过滤器的使用][vue] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

待我称王封你为后i/ 2021年07月26日 01:59/ 0 赞/ 383 阅读

相关 Vue中的过滤器（filter）

目录过滤器使用位置全局过滤器、局部过滤器全局过滤器：局部过滤器：过滤器中传入多个参数：多个过滤器串联： --------------------

柔光的暖阳◎/ 2021年07月25日 13:48/ 0 赞/ 623 阅读

相关 vue filter过滤器

过滤器方式一:局部过滤器 1、与data同级 filters:{ xx:function(value)

拼搏现实的明天。/ 2021年07月24日 18:56/ 0 赞/ 485 阅读