vue如何查找数组中符合条件的对象

目录
  • 查找数组中符合条件的对象
  • 根据id找出数组里的对象

查找数组中符合条件的对象

let val = 1;
let list = [
    {id:1,name:'张三'},
    {id:2,name:'李四'},
    {id:3,name:'王五'},
];

let arr = list.filter((i) => {
  return val == i.id;
});

根据id找出数组里的对象

 dsChange(id){
      let selectedName = {};
      selectedName = this.dsOptions.find((item)=>{
        return item.dsid === id;
        //筛选出匹配数据，是对应数据的整个对象
      });
      this.formModel.ds = selectedName.ds
      this.formModel.dsid = selectedName.dsid
 
    },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue路由传参接收以及传参对象为对象时的问题及解决

    目录 路由传参接收以及传参对象为对象时的问题 场景 接收路由参数 vue路由传参总结 Vue路由传参 路由传参接收以及传参对象为对象时的问题 具体代码如下所示: 场景 <div @click='toDetail'>查看详情</div> 路由传参不能直接传一个对象,需要使用JSON.stringify()方法将其转换成一个字符串,然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象 const router = useRouter() const toDetail

  • vue对象复制方式(深拷贝,多层对象拷贝方式在后面)

    vue对象复制方式(深拷贝,多层对象拷贝方式在后面)

    目录 vue对象复制 更新 我的理解 vue对象复制的坑--对象深度拷贝 错误描述 解决办法 vue对象复制 使用:es6中的“对象扩展运算符 ”,如下 // 对象深拷贝 obejctCopy() { // 源对象小李 const source = { name: '小李', age: 18, gender: '男', school: '清华大学' } // 拷贝小李 const copy1 = { ...source } // 拷贝小李,并修改名字为小张 const copy2 = { ...

  • Vue关于对象直接赋值的坑及解决

    Vue关于对象直接赋值的坑及解决

    目录 Vue对象直接赋值的坑 Vue对象的赋值Object.assign({}, row) Vue对象直接赋值的坑 受JavaScript的限制,Vue不能监听到对象属性的添加或删除.如果这样做了,你会发现添加或删除的属性不是响应式的,即无法及时更新视图. 如果我们需要将a对象赋值给b对象时,要么把b对象的所有属性都在a对象中定义一下,要么 使用this.$set(this.object,key,value)将b对象中有a对象中没有的属性set进去,或者使用Object.assign(this.

  • Vue3响应式对象Reactive和Ref的用法解读

    目录 一.内容简介 二.Reactive 1. 关键源码 2. 源码流程分析 三.代理拦截操作 1. 数组操作 2.Get操作 3. Set操作 4. 其余行为拦截操作 四.Ref对象 1. 思考一个问题 2. 简要说明 3. 关键源码 四. 源码解析 五.总结 一.内容简介 本篇文章着重结合源码版本V3.2.20介绍Reactive和Ref.前置技能需要了解Proxy对象的工作机制,以下贴出的源码均在关键位置备注了详细注释. 备注:本篇幅只讲到收集依赖和触发依赖更新的时机,并未讲到如何收集依赖

  • vue对象的深度克隆方式

    目录 vue对象的深度克隆 方法1 方法2 方法3 vue克隆对象时遇到的问题 vue对象的深度克隆 方法1 通过js序列化,将js转换成字符串,然后再将字符串转换成js对象 var olbObj = {a:1}; var str = JSON.stringify(obj); //序列化对象 var newobj = JSON.parse(str); //还原 //相当于 var newObj = JSON.parse(JSON.stringify(olbObj )) 方法2 ES6语法对象展开

  • vue3接口数据赋值对象,渲染报错问题及解决

    vue3接口数据赋值对象,渲染报错问题及解决

    目录 vue3接口数据赋值对象,渲染报错 vue在渲染数据的时候的一些报错问题 问题描述 解决方法 vue3接口数据赋值对象,渲染报错 const app = require('express')() // 跨域设置 app.all("*", function (req, res, next) { res.setHeader("Access-Control-Allow-Credentials", true); res.setHeader("Access-C

  • vue如何查找数组中符合条件的对象

    目录 查找数组中符合条件的对象 根据id找出数组里的对象 查找数组中符合条件的对象 let val = 1; let list = [ {id:1,name:'张三'}, {id:2,name:'李四'}, {id:3,name:'王五'}, ]; let arr = list.filter((i) => { return val == i.id; }); 根据id找出数组里的对象  dsChange(id){       let selectedName = {};       selecte

  • 利用js查找数组中指定元素并返回该元素的所有索引示例

    前言 这篇文章主要给大家介绍的是利用js查找数组中指定元素并返回该元素的所有索引的相关资料,文中给出了详细的示例代码,下面话不多说,来看看详细的代码示例吧. 示例代码 //在数组中查找所有出现的x,并返回一个包含匹配索引的数组 function findall(a,x){ var results=[], len=a.length, pos=0; while(pos<len){ pos=a.indexOf(x,pos); if(pos===-1){//未找到就退出循环完成搜索 break; } r

  • JS查找数组中重复元素的方法详解

    JS查找数组中重复元素的方法详解

    本文实例讲述了JS查找数组中重复元素的方法.分享给大家供大家参考,具体如下: JS的数据类型有一个数组.今天我们就来谈谈对数组的一种处理.相信很多人都遇到过从数组中查找出不重复的元素,但是我遇到的却是从数组中查找出重复的元素. 从js数组中查找出不重复的元素的方法有很多,下面就给大家列举一个: <!DOCTYPE html> <html> <body> <script> Array.prototype.deleteEle=function(){ var ne

  • php数组函数序列之in_array() - 查找数组中是否存在指定值

    in_array()定义和用法 in_array() 函数查找数组中是否存在指定值. 语法 in_array(value,array,type)参数 描述 value 必需.规定要在数组搜索的值. array 必需.规定要搜索的数组. type 可选.如果设置该参数为 true,则检查搜索的数据与数组的值的类型是否相同. 说明 如果给定的值 value 存在于数组 array 中则返回 true.如果第三个参数设置为 true,函数只有在元素存在于数组中且数据类型与给定值相同时才返回 true.

  • SQL查询数据库中符合条件的记录的总数

    1. select count(*) from table; //统计元组个数 2. select count(列名) from table; //统计一列中值的个数 3. select count(*) from table where 字段 = ""; //符合该条件的记录总数 4. sql_count = "select count(*) from article a where 1=1 "; //这条语句中a就代表article 这张表,后面可以写a.字段来

  • php数组函数序列之array_slice() - 在数组中根据条件取出一段值，并返回

    array_slice()定义和用法 array_slice() 函数在数组中根据条件取出一段值,并返回. 注释:如果数组有字符串键,所返回的数组将保留键名.(参见例子 4) 语法 array_slice(array,offset,length,preserve)参数 描述 array 必需.规定输入的数组. offset 必需.数值.规定取出元素的开始位置. 如果是正数,则从前往后开始取,如果是负值,从后向前取 offset 绝对值. length 可选.数值.规定被返回数组的长度. 如果是负

  • PHP查找数组中只出现一次的数字实现方法【查找特定元素】

    本文实例讲述了PHP查找数组中只出现一次的数字实现方法.分享给大家供大家参考,具体如下: 问题: 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 实现代码如下: <?php function FindNumsAppearOnce($array) { // write code here // return list, 比如[a,b],其中ab是出现一次的两个数字 $count = array_count_values($array); foreach

  • Vue.js在数组中插入重复数据的实现代码

    1.在默认的情况下,Vue.js默认不支持往数组中加入重复的数据.可以使用track-by="$index"来实现. 2.不使用track-by="$index"的数组插入,数组不支持重复数据的插入 2.1  JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type=&q

  • JS实现查找数组中对象的属性值是否存在示例

    JS实现查找数组中对象的属性值是否存在示例

    本文实例讲述了JS实现查找数组中对象的属性值是否存在.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var studentsArray = [ { "

  • JavaScript遍历查找数组中最大值与最小值的方法示例

    JavaScript遍历查找数组中最大值与最小值的方法示例

    本文实例讲述了JavaScript遍历查找数组中最大值与最小值的方法.分享给大家供大家参考,具体如下: <script language="javascript"> // 查找数组中最小值 function mathMin(arrs){ var min = arrs[0]; for(var i = 1, ilen = arrs.length; i < ilen; i+=1) { if(arrs[i] < min) { min = arrs[i]; } } ret

随机推荐