在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. Tempdb--查看tempdb使用的脚本

    GO /****** Object: StoredProcedure [dbo].[usp_GetTempDBUsedSpace] Script Date: 03/05/2014 13:24:42 * ...

  2. 手动编译安装lamp之php

    转自马哥教育讲课文档 三.编译安装php-5.4.8 1.解决依赖关系: 请配置好yum源(可以是本地系统光盘)后执行如下命令: # yum -y groupinstall "X Softw ...

  3. AT指令框架的实现

    AT指令概述 AT指令是应用于终端设备与PC应用之间的连接与通信的指令.AT 即Attention.每个AT命令行中只能包含一条AT指令:对于AT指令的发送,除AT两个字符外,最多可以接收1056个字 ...

  4. WPF 卡顿调试经验

    1. 问题 最近的一个项目,正常调试情况下,运行一切正常,但是有某个用户登录后,出现界面卡顿2-3mins后,才正常运行. 2.解决问题方法 (1)首先由于是必现问题,就想在vs的工作环境下调试一下, ...

  5. python网络编程--TCP连接的三次握手(三报文握手)与四次挥手

    一.TCP连接 运输连接有三个阶段: 连接建立.数据传送和连接释放. 在TCP连接建立过程中要解决以下三个问题: 1,要使每一方能够确知对方的存在. 2.要允许双方协商一些参数(如最大窗口之,是否使用 ...

  6. K - 欧拉回路(并查集)

    点击打开链接 K - 欧拉回路 欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条回路.现给定一个图,问是否存在欧拉回路? Input 测试输入包含若干测试用例.每个测试用例的第 ...

  7. codeforces 1096 题解

    A: 发现最优的方案一定是选 $ l $ 和 $ 2 * l $,题目保证有解,直接输出即可 #include <bits/stdc++.h> #define Fast_cin ios:: ...

  8. C#取得控制台应用程序的根目录方法

    如有雷同,不胜荣幸,若转载,请注明 取得控制台应用程序的根目录方法1:Environment.CurrentDirectory 取得或设置当前工作目录的完整限定路径2:AppDomain.Curren ...

  9. html中文字溢出处理(text-overflow)

    文字溢出处理有两种方式: 一.css overflow:hidden;            white-space: nowrap;            text-overflow: ellips ...

  10. google Agent

    一句话:改HOSTS文件 有时候要查看appengine.google.com的后台,但死活上不去,怎么办?还是那个老办法: 1.在cmd下Ping www.google.com.hk,获得IP地址, ...