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

待我称王封你为后i 2021-07-26 01:59 425阅读 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 条评论，425人围观）

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

相关阅读

相关 Vue过滤器 filter

笔记关于filter的官方文档的一些讲解及个人的一些拓展简单介绍一下过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给...

素颜马尾好姑娘i/ 2024年04月18日 13:16/ 0 赞/ 123 阅读

相关 vue 过滤器filters

对文本进行处理：使用过滤器 //局部过滤器 <template> <div class="son"> <input type="t

旧城等待，/ 2023年02月16日 05:54/ 0 赞/ 22 阅读

相关 vue中过滤器filters的使用

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

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

相关 vue 过滤器 filter

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

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

相关 vue 过滤器 filters

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

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

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

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

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

相关 SpringMVC 过滤器Filter使用解析

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

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

相关 SpringMVC 过滤器Filter使用解析

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

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

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

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

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

相关 vue filter过滤器

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

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