vue使用js遍历数组和对象

vue使用js遍历数组和对象前言在 vue 中 遍历数组和对象的方式略有不同 不能完全以数组或对象的遍历方式给对方使用并获取数据 为了记录以及以后方便查看 现在对其进行整理 数组遍历以数组 array 1 2 3 4 5 为例数组的遍历有以下几种获取数组的长度进行遍历 for leti 0 i array length i Console log 遍历后的数据 array i 使用 foreach 遍历 array foreach index Co array length i

前言

在vue中,遍历数组和对象的方式略有不同,不能完全以数组或对象的遍历方式给对方使用并获取数据。为了记录以及以后方便查看,现在对其进行整理。

数组遍历

以数组

array = [1,2,3,4,5] 

  1. 获取数组的长度进行遍历
for (let i = 0; i<array.length;i++) { 
     Console.log("遍历后的数据",array[i]); } 
  1. 使用foreach遍历
array.foreach((index) => { 
     Console.log("遍历后的数组:",array[index]); Console.log("下标:",index); }) 
  1. Object.key()遍历
Object.key(array).foreach((index) => { 
     Console.log("遍历后数组:",array[index]); Console.log("下标:",index); }) 
  1. map遍历
array.map((index) => { 
     Console.log("遍历后数组:",array[index]); Console.log("下标:",index); }) 
  1. for… in遍历
for (let inedx in array){ 
     Console.log("遍历后数组:",array[index]); Console.log("下标:",index); } 
  1. for…of遍历
for (let index of array) { 
     Console.log("遍历后数组:",array[index]); Console.log("下标:",index); } 

对象遍历

以对象

let obj = [ { 
     name: "张三", age: "15"}, { 
     name: "李四", age: "26"} ] 

为例

  1. for … in … 遍历
for (let key in obj){ 
     Console.log("下标:",key); Console.log("遍历后每条数据:",obj[key]); Console.loh("遍历后每天数据姓名属性值:",obj[key].name); } 
  1. Object.key()遍历
Object.keys(obj).forEach((key) => { 
     Console.log("下标:",key); Console.log("遍历后每条数据:",obj[key]); Console.loh("遍历后每天数据姓名属性值:",obj[key].name); }) 

结语

以上为vue遍历数组和对象的方式。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/179367.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月26日 下午3:44
下一篇 2026年3月26日 下午3:45


相关推荐

  • Mysql 查看执行慢的sql语句「建议收藏」

    Mysql 查看执行慢的sql语句

    2022年2月17日
    65
  • 决心书

    决心书

    2022年3月6日
    46
  • vue 键盘事件keyup/keydoen

    vue 键盘事件keyup/keydoen使用:当你按下键盘,键盘的值为13的时候,将会执行show函数方法以上两种keyup和keyup.13方法是一样的,点击回车按键,就会执行alert方法一些便捷方式:@keyup.13回

    2022年8月4日
    13
  • mysql时区重启后失效_mysql时区问题

    mysql时区重启后失效_mysql时区问题背景插入 timestamp 类型与 datetime 类型数据比预计结果早 14 小时原因如果说相差 8 小时不够让人惊讶 那相差 13 小时可能会让很多人摸不着头脑 出现这个问题的原因是 JDBC 与 MySQL 对 CST 时区协商不一致 因为 CST 时区是一个很混乱的时区 有四种含义 美国中部时间 CentralStand USA UTC 05 00 或 UTC 06 00 澳大利亚中部时间 Cen

    2025年9月29日
    5
  • 逆向分析学习入门教程

    逆向分析学习入门教程转在于逆向工厂(一):从helloworld开始前沿从本篇起,逆向工厂带大家从程序起源讲起,领略计算机程序逆向技术,了解程序的运行机制,逆向通用技术手段和软件保护技术,更加深入地去探索逆向的魅力。一、程序如何诞生?1951年4月开始在英国牛津郡哈维尔原子能研究基地正式投入使用的英国数字计算机“哈维尔·德卡特伦”,是当时世界上仅有的十几台电脑之一。图中两人手持的“纸带”即是早期的程序,纸带通过是否

    2022年6月19日
    43
  • qq2009java触屏_MTK手机QQjava版 山寨机qq2009通用版

    qq2009java触屏_MTK手机QQjava版 山寨机qq2009通用版MTK 手机 java 版山寨机 2009 通用版为了满足国产手机用户对正版手机的迫切需求 腾讯于 2010 年 6 月发布了 该版本全面内置手机浏览器 支持网址导航 支持丰富手机菜单设置等等 能够实现一站满足用户聊天 上网需求 下面就针对该版本手机的主要功能进行详细评测 新特性 1 全新的五套皮肤 小编刚装上 MTK2010 刚开始感觉奇怪 怎么是手机浏览器呢 仔细一看 发现原来还是手机

    2026年3月19日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号