查找Vue中下标的操作(some和findindex)

some的用法

 list:[
      {id:1,name:'奔驰',citme:new Date()},
      {id:2,name:'宝马',citme:new Date()}
    ]

 - // this.list.some((item,i)=>{
        //  if(item.id==id){
        //    this.list.splice(i,1)
        //    return true
        //  }
        // })

其中some是比较list中每一项的id值，然后把这个id值给了item，item.id就代表了list中的每一项id值，如果返回true，就不再往后执行

var index= this.list.findIndex(item=>{
          if(item.id==id){
            return true
          }
        })

findIndex 同理也是遍历list中的id值，item.id就是list中的id值

补充知识：vue处理对象数组（下标和值）

我就废话不多说了，大家还是直接看代码吧~

Storelist(){
     this.$api.question().then(res=>{
      if (res.status==1){
       let that = this
       let a = res.result.store
       // a是获取接口的对象数组
       console.log(a)
       console.log(a.length)

       // 对象数组--数据的长度
       var groupCount = Object.getOwnPropertyNames(a).length;
       console.log(groupCount)

       // 对象数组的下标
       var keys1 = []
       for (var p1 in a) {
        if (a.hasOwnProperty(p1))
         keys1.push(p1);
       }
       console.log(keys1)

		//组合数据-拼接成数组
       let qqq = []
       for (let i=0;i<keys1.length;i++){
        console.log(keys1[i])
        console.log(a[keys1[i]])
        qqq.push({
         pid:keys1[i],
         name:a[keys1[i]]
        })
       }
       console.log(qqq)
      }
     })
    },

以上这篇查找Vue中下标的操作(some和findindex)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现Input输入框模糊查询方法

    本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下 原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search

  • vue 取出v-for循环中的index值实例

    一开始接触到vue的for循环就觉得贼好用,重复性的东西再也不用ctrl C+ctrl V了好吗.不仅代码可复用了,而且提高了代码可读性.减轻了工作量,更重要的是写代码都有成就感了. 贴出个小小例子: template <ul v-for="(item,index) in pcState"> <li>{{item.name}}</li> <li>{{item.state}}</li> <li>{{item.ip}}

  • vue基本使用--refs获取组件或元素的实例

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods 添加ref属性 <div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho">&l

  • vue遍历对象中的数组取值示例

    前几天小项目,没考虑周全,让后端改接口,改成数组中包含对象中包含数组的形式,后来越琢磨越不对,后台把所有数据放在了一个对象里,我拿弹窗数据不好拿,索性又改了回来,把后端折腾够呛,自己也折腾够呛,发上来,以示警戒 改前拿数据 <div class='your-container'> <div class="sortText"> <div>综合排序</div> <div class="sortHot" @click=

  • 查找Vue中下标的操作(some和findindex)

    some的用法 list:[ {id:1,name:'奔驰',citme:new Date()}, {id:2,name:'宝马',citme:new Date()} ] - // this.list.some((item,i)=>{ // if(item.id==id){ // this.list.splice(i,1) // return true // } // }) 其中some是比较list中每一项的id值,然后把这个id值给了item,item.id就代表了list中的每一项id值,

  • 解决vue页面DOM操作不生效的问题

    现象: 使用Element UI渲染了一个树形结构,设计在鼠标移入每个节点是显示其中的操作按钮,效果如下: 下面是出错部分: 在新增节点后移入新增节点附近(图中是移入一级2),功能按钮的显示位置出现偏移 原因查找: 经过调试发现是在新增节点后,执行DOM操作获取节点时,取到的仍是之前的结构,新增的节点并未获取到. 原因分析: 猜测是vue使用的虚拟DOM,使得页面虽然已经渲染出来,但在Vue实例中让处在在虚拟DOM中,无法获取. 解决方法: 使用Vue.nextTick,看下官方材料: '在下次

  • 搭建element-ui的Vue前端工程操作实例

    一.安装npm镜像 (1)下载node.js, 配置node.js的环境变量 检测PATH环境变量是否配置了Node.js,点击开始=>运行=>输入"cmd" => 输入命令"path" 检查Node.js版本 在命令窗口输入:npm install -g cnpm –registry=https://registry.npm.taobao.org 二.安装全局vue-cli (1)npm install -g vue-cli 回车,验证是否安装成

  • vue.js数据绑定操作详解

    本文实例讲述了vue.js数据绑定操作.分享给大家供大家参考,具体如下: 数据绑定 响应式的数据绑定系统.建立绑定之后,DOM将和数据保持同步,无须手动维护DOM.使代码能够更加简洁易懂.提升效率. 数据绑定语法 1.文本插值 {{ }}Mustache标签 <span>Hello {{ name }}</span> data:{ name: 'vue' } == > Hello vue 单次插值 首次赋值后再更改vm实例属性值不会引起DOM的变化 <span v-on

  • Vue.set 全局操作简单示例

    Vue.set 全局操作简单示例

    本文实例讲述了Vue.set 全局操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue.set 全局操作</title> <script type="text/javascript" src="https://cdn.bootc

  • echarts.js 动态生成多个图表 使用vue封装组件操作

    组件只做了简单的传值处理,记录开发思路及echarts简单使用. 这里默认所有图表样式一致,都为柱状图,如需其他类型,可查阅echarts官网文档,再动态传值即可. vue 使用组件 ------在外层用v-for 循环,传不同值进charts 即可 <!-- 传入对应的数据给子组件 --> <charts :options="item.select" :id='"charts" +index' :index="index" s

  • Java实现二分查找树及其相关操作

    二分查找树(Binary Search Tree)的基本操作有搜索.求最大值.求最小值.求前驱.求后继.插入及删除. 对二分查找树的进行基本操作所花费的时间与树的高度成比例.例如有n个节点的完全二叉树,对它进行的基本操作的时间复杂度为O(logn).然而,如果树是一个有n个节点的线性的链,则在这种情况下的时间复杂度为O(n). 1.什么是二分查找树 二分查找树是一种有组织的二叉树.我们可以通过链接节点表示这样一棵树.每个节点包含键(key),数据(data),左子节点(left),右子节点(ri

  • vue使用neovis操作neo4j图形数据库及优缺点

    vue使用neovis操作neo4j图形数据库及优缺点

    1.前言: 由于项目需要在前端展示关系图,常规的做法是,后端操作数据库返回Json数据,前端使用d3或者echarts进行展示,奈何因为后端不给力(说是无法获取最核心的关系id),所以前端借助neovis.js插件直接操作数据库,进行展示. 2.优缺点 优点: 相比于常规做法,简单方便直接,而且neo4j数据库在处理复杂关系数据方面有优势. 缺点: 暴露账号密码,通过f12控制台直接就能看到数据的账号和密码.对此的解决方法是,使用企业版neo4j注册只读账号,或者后端直接限制数据库查询语言,既只

  • Vue组件基础操作介绍

    目录 一.组件 二.组件的创建 三.组件中的data 四.组件中的methods 一.组件 组件是vue的重要的特征之一,可以扩展html的功能,也可以封装代码实现重复使用. 二.组件的创建 1. 非脚手架方式下创建 ​ 第一步:使用Vue.extend创建组件 ​ 第二步:使用Vue.component注册组件 ​ 第三步:在html页面中使用组件 <div id="app"> <my-com></my-com> <!-- 使用组件:名称之间

  • 一文了解axios和vue的整合操作

    目录 前言 一.axios是什么? 1.定义 2.原理 3.主要特点 二.axios的应用 三.axios+vue的应用 总结 前言 前面学习了vue的本地应用操作,本文将会学习Vue的网络应用,介绍axios并且学习axios和Vue的结合使用 一.axios是什么? 1.定义 Axios是一个基于promise 的 HTTP 库,可以用在浏览器和 node.js中 2.原理 axios本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范. 3.主要特点 1.从

随机推荐