vue 遍历数组

news2024/11/17 9:38:19

1.forEach(): 遍历数组

需要一个回调函数作为参数

回调函数的形参: ①. value: 遍历数组的内容 ②.index: 对应数组的索引 ③.array: 数组本身

forEach() 方法主要是用于调用数组的每个元素,并将元素传递给回调函数。

注:对于空数组不会执行回调函数

语法:

array.forEach(function(currentValue, index, array), thisValue)

例子: ①. 没有返回值

var a = [1,2,3,4,5]
var b = a.forEach((item) => {
    item = item * 2
})
console.log(b)
// undefined

②.原数组不会改变

2. map(): 有返回值,返回一个新的数组

①. 返回一个经过处理的新数组,但不改变原数组的值

var a = [1,2,3,4,5]
var b = a.map((item) => {
    return item = item * 2
})
console.log("a--:", a)
console.log("--b-:", b)

 ②. 重新构建数据 (一般适用于接口给你返回的数组格式和想呈现的数据格式不一样)

let arr = res.data;

   let newArr = arr.map(val => {

      let json = {};

         json.date = val.split('-').join('-');

         json.title = '';

        return json;

this.demoEvents = newArr; 

//重新构建出来的数据格式为{value: "",title: ""}

③. 在vue中的应用

例如: 充值金额需要在整数的基础上随机减去100或者加上100

export default {
    data() {
        moneyList: [1000,2000,5000,10000,20000,50000]
    },
    computed: {
        moneyList_new() {
            return this.moneyList.map((item) => {
                const random = Math.random() > 0.5 ? 1 : -1;
                return Math.floor(Math.random()*100) * random + item;
            })
        }
    }
}

//  实际渲染处理过的数组

   

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/410098.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

jsoup 框架的使用指南

概述 参考: 官方文档jsoup的使用JSoup教程jsoup 在 GitHub 的开源代码 概念简介 jsoup 是一款基于 Java 的 HTML 解析器,它提供了一套非常省力的 API,不但能直接解析某个 URL 地址、HTML 文本内容,而且还能通过类似于 DOM、CS…

刷题日常计~JS①

作者 : SYFStrive 博客首页 : 点击跳转HomePage 📜: 初编程JavaScript之每天10题 👉 从质变到量变💪 📌:个人社区(欢迎大佬们加入) 👉:社区链接&#x1f5…

Vue常见报错及解决方案

写代码的过程中一定会遇到报错,遇到报错不要担心,认真分析就可以解决报错,同时积累经验,早日成为大牛👍 本文会整理一些在编码过程中遇到的常见报错,共同学习。 一、报错结构 二、常见问题总结及解决方法 …

微信小程序跳转外部链接

微信小程序跳转外部链接 在开发小程序过程中,我们可能会有这样的需求,在小程序中打开H5或者外部链接 实现方法如下: 1、配置业务域名 小程序管理后台——开发(开发管理)——开发设置:新增业务域名 在这里将你需要的外部链接域…

超详细的正则表达式的使用方法,学不会找我

正则表达式的基本使用 前言: 在我们开发过程中,有很多地方需要用到正则表达式。如验证用户登录信息、手机号、邮箱地址等等。那你都会正则表达式的哪几个方法呢? 首先,我们要知道什么是正则表达式。 正则表达式的定义&#xff…

节流还在用JS吗?CSS也可以实现哦

函数节流是一个我们在项目开发中常用的优化手段,可以有效避免函数过于频繁的执行。一般函数节流用在scroll页面滚动,鼠标移动等。 为什么需要节流呢,因为触发一次事件就会执行一次事件,这样就形成了大量操作dom,会出现卡顿的情况…

ES6模块化(默认导入导出、按需导入导出、直接导入)

一、介绍ES6模块化 ES6 模块化规范是浏览器端与服务器端通用的模块化规范,ES6模块化的出现前端开发者不再需要额外的学习其他的模块化规范。 二、ES6 模块化规范中定义: 1.每个 js 文件都是一个独立的模块 2.导入其它模块成员使用 import 关键字 3.向外…

React组件——类组件

一、组件的概念 使用组件的方式进行编程,可以提高开发效率,提高组件的复用性、提高代码的可维护性和可扩展性 React定义组件的方式有两种 类组件:React16.8版本之前几乎React使用的都是类组件 函数组件:React16.8之后,函数式组件使用的越…

2023高频前端面试题(含答案)

一、简单页面 1、CSS选择器样式优先级 2、CSS实现三列布局(左右固定宽度,中间自适应) (1)CSS浮动 第一个float:left,第二个float:right,第三个设置margin-left和margin-right (2&am…

什么是Mixin?带你了解Vue中的Mixin混入

什么是Mixin?本篇文章带大家了解一下Vue中的Mixin混入,介绍Mixin和Vuex的区别,Mixin的使用方法,希望对大家有所帮助! Vue框架现在基本上已经占据了前端的半壁江山,Vue的数据驱动和组件化的思想深入人心。Vu…

web前端-JavaScript中的数组详解

🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上) 🐳博客主页:苏凉.py的博客 🌐系列总专栏:web前端基础教程 👑名言警句&#xff1a…

我用尽了洪荒之力,解开了ChatGPT 写前端代码的封印,结果...

我用尽了洪荒之力,解开了ChatGPT 写前端代码的封印介绍ChapGPT 听起来好得令人难以置信,所以让我们让它为我们编写一些 JS 代码。我想看看它是否可以解决我作为前端开发人员每天所做的任务。是驴子是马拉出来溜溜,我们还是直接进入主题一探究…

Vite + Vue3 +Vant4构建项目时,按需引入使用Toast组件,引用 showToast 时出现编译报错的解决方案

Vite Vue3 Vant4构建项目时,按需引入使用Toast组件,引用 showToast 时出现编译报错的解决方案 文章目录Vite Vue3 Vant4构建项目时,按需引入使用Toast组件,引用 showToast 时出现编译报错的解决方案一.问题定位二.以下为完整解决…

React+Mobx|基本使用、模块化

欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t 框架 React框架 Reac

【小程序项目开发 -- 京东商城】uni-app 商品分类页面(上)

🤵‍♂️ 个人主页: 计算机魔术师 👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。 🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推| 还没有账户的小伙伴 速速点击链接…

前端 --- HTML

文章目录1. HTML 结构1.1 HTML 文件基本结构1.2 VsCode 中 使用 HTML 的快捷键2. HTML 常见标签2.1 注释标签2.2 标题标签2.3 段落标签2.4 换行标签2.5 格式化标签2.6 图片标签2.7 超链接标签2.8 表格标签2.9 列表标签2.10 表单标签form 标签input 标签① 文本框② 密码框③ 单…

Vue中实现路由跳转的三种方式详细分解

vue中实现路由跳转的三种方式 目录 vue中实现路由跳转的三种方式 一、使用vue-router 1.下载vue-router模块到当前工程 2.在main.js中引入VueRouter函数 3.添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件 4.创建路由规则数组 – 路径和组件名对应关系 5…

CSS flex布局最后一行左对齐的常用方法

一、justify-content 在CSS flex布局中,justify-content属性定义了浏览器之间,如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间,可以控制列表的水平对齐方式, justify-content: center; /* 居中排列 */ …

Visual Studio 2022 给创建的类/接口加头注释

Visual Studio 2022 给类加注释 找到文件路径 一般在C盘: C:\Program Files\Microsoft Visual Studio\2022\Professional\Common7\IDE\ItemTemplates\CSharp\Code\2052\Class 如图: 修改这个.cs文件 using System; using System.Collections.Generic…

Linux驱动开发——串口设备驱动

Linux驱动开发——串口设备驱动 一、串口简介 串口全称叫做串行接口,通常也叫做 COM 接口,串行接口指的是数据一个一个的顺序传输,通信线路简单。使用两条线即可实现双向通信,一条用于发送,一条用于接收。串口通信距…