在vue中需要比较两个数组取相同值

一个大数组一个 小数组,小数组是大数组的一部分取相同ID的不同name值

有两种写法,两个for循环和map写法

const toName = (ids, arr) => {
let a = [];
ids = String(ids) && String(ids).split(',') || [];
for (let i = 0, length = arr.length; i < length; i++) {
for (let j = 0, l = ids.length; j < l; j++) {
if (ids[j] == arr[i].id) {
a.push(arr[i].name)
}
}
}
return a.join();
}
const toName = (ids, arr) => {
let list = []
ids = String(ids) && String(ids).split(',') || [];
ids.map((x) => {
this.arr.map((k) => {
if (k.id == x) {
return list.push(k.name)
}
})
})
ids = list.join("、")
}

在vue中就可以使用了

{{78 | toName(“78,456,78”)}}//数字可以转字符串
{{“78”| toName(“78,456,78”)}}//直接使用
{{“87,78,80”| toName(“78,456,78”)}}//直接使用
 

vue中过滤器比较两个数组取相同值的更多相关文章

  1. go 两个数组取并集

    实际生产中,对不同数组取交集.并集.差集等场景很常用,下面来说下两个数组取差集 直接上代码: //两个集合取并集 package main import "fmt" //思想: / ...

  2. Java中如何把两个数组合并为一个

    在Java中,如何把两个String[]合并为一个? 看起来是一个很简单的问题.但是如何才能把代码写得高效简洁,却还是值得思考的.这里介绍四种方法,请参考选用. 一.apache-commons 这是 ...

  3. LeetCode 4 Median of Two Sorted Arrays (两个数组的mid值)

    题目来源:https://leetcode.com/problems/median-of-two-sorted-arrays/ There are two sorted arrays nums1 an ...

  4. ios开发之--比较两个数组里面的值是否相同

    比较两个数组里面的内容是否相同,代码如下: NSArray *array1 = [NSArray arrayWithObjects:@"a", @"b", @& ...

  5. vue中父组件如何监听子组件值的变化

    vue中我们会遇到很多父子组件通信的需求, 下面简单列一下,父子组件通信的几种情况 1:父组件向子组件传值:使用prop向子组件传值: 2:子组件实时监听父组件传来的值的变化:使用watch去监听父组 ...

  6. vue中过滤器filter

    Vue.js 允许我们自定义过滤器,可被用作一些常见的文本格式化.过滤器可以用在两个地方:mustache 插值表达式. v-bind表达式.过滤器应该被添加在 JavaScript 表达式的尾部,由 ...

  7. Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18)

    1.过滤器 1.1 概念 过滤器: 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理). 语法: 1.注册过滤器:Vue.filter(name,callback) 或 new V ...

  8. asp.net中过滤器的两种写法

    1.写在一个单独的类库中在web.config中进行配置 <httpModules> <add name="" type="类的全名称,程序集的名称&q ...

  9. vue中过滤器filters的使用

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

随机推荐

  1. 基于Extjs的web表单设计器 第三节——控件拖放

    看过之前设计器截图的朋友应该有印象,可能会发觉我们的设计器UI设计布局其实类似Visual studio 的设计界面,采用的是左.中.右三个区域布局.左侧为控件区域.中间为表单的画布设区域.右侧为属性 ...

  2. Nutch 问题杂记

    1. 如何绕过目标站点的robots.txt限制 多数站点都是只允许百度.google等搜索引擎抓取的,所以会在robots.txt里限制其他爬虫. nutch自然是会遵循robots协议的,但是我们 ...

  3. 对象初始化的完整过程(C#)

    1.静态构造函数 在引入本文的主题之前,我们先来铺垫一下吧,看看静态构造函数的概念及用途. C#中允许创建无参数构造函数,该函数仅执行一次.它一般被用来初始化静态字段.CLR不能保证在某个特定时刻执行 ...

  4. C#基础笔记(第十五天)

    1.Directory//File 文件 Path 路径 FileStream StreamReader StreamWriter 流 Directory 文件夹 目录 //创建文件夹 Directo ...

  5. pageadmin 网站建设系统如何新建进程池并在站点中使用

    1.打开iis管理界面,右键应用程序池,点击添加应用程序池,添加界面如下图,注意pageadmin cms net版本选择4.0,托管模式建议选择集成模式. 2.添加完毕后,在网站中点击对应站点,点击 ...

  6. 【文文殿下】[51nod1469] 淋漓尽致子串

    SAM的经典应用 一个状态的SIze==1绝对不合法. 一个状态在parent树上有一个Size>1的后继绝对不合法(前面可以再补字符) 一个状态可以转移到Size>1的节点绝对不合法,因 ...

  7. 使用memcache或redis限制某个用户或者某ip用户一段时间内最大投票次数

    实现每个用户在某网站10分钟内最多投票5次 function isFrequently($key){ $t = 60*10; $n = 5; $mem = new Memcache(); $mem-& ...

  8. 现在就启用 HTTPS,免费的!

    现在就启用 HTTPS,免费的! 现在,你应该能在访问https://konklone.com的时候,在地址栏里看到一个漂亮的小绿锁了,因为我把这个网站换成了HTTPS协议.一分钱没花就搞定了. 为什 ...

  9. Dreamweaver_CS6安装及破解文件

    资源下载地址: 链接: https://pan.baidu.com/s/1mhQ5DoO 密码: mnv3 1.下载,安装,先作为试用版安装 可能显示的页面不一样,但是就是安装试用版 2.接受许可协议 ...

  10. java中的jdk配置详解:

    1.配值系统变量"JAVA_HOME" 变量名JAVA_HOME: 指向:JDK(java开发工具包)的安装路径 目的:使用JDK安装目录时,可以直接通过”%JAVA_HOME%“ ...