在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. struts2+ckeditor配置图片上传

    又是一个漫漫长夜. 公司的编辑器坏了,用的是百度编辑器,上传图片的网址被框架给拦截了,我们本地怎么测试都没问题,放到服务器就这样了.和老李找了半天,疯了,没原因的. 笔者以前用过jsp+ckedito ...

  2. html中常用的标签元素

    <html></html> 创建一个HTML文档<head></head> 设置文档标题和其它在网页中不显示的信息<title></t ...

  3. .net core 自制错误日志

    前言 之前.net framework用的ErrorLog帮助类,对于监控错误形成日志,内容非常清晰,想在.net core2.2中继续用,但是有很多不一样的地方,所以想总结一下. 首先需要HttpC ...

  4. trace sql log

    C:\Windows\system32>cd /d  d:\PSSDIAG\pssd_2k12_x64 d:\PSSDIAG\pssd_2k12_x64>pssdiag.cmd 2014/ ...

  5. infopath 2007 升级到2013 栏目字段重复生成问题

    1. 把Expense Statement.xsn的xsn扩展名改成zip.然后解压后会看到有一个mnifest.xsf. 2. 在vs 2013 中打开它. 3. Search for the fi ...

  6. zstack相关学习的博客

    https://segmentfault.com/u/camile/articles?page=1

  7. css细节复习笔记——基本视觉格式化

    css包含如此开放.如此强大的一个模型,对于这样一个模型,可以有无数种方法结合应用各种属性,可以得到的效果数不胜数. 基本框 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素中心有一个 ...

  8. Ceph 的基础数据结构 [Pool, Image, Snapshot, Clone]

    原文链接:http://www.cnblogs.com/sammyliu/p/4843812.html?utm_source=tuicool&utm_medium=referral 1 Poo ...

  9. web思维导图(前期)

  10. ESXi到KVM之v2v迁移

    1.ESXi到KVM之v2v情况说明 (1).配置任务列表: 1)VMwareESXi虚拟平台下linux系统迁移到KVM虚拟平台.2)VMwareESXi虚拟平台下windows系统迁移到KVM虚拟 ...