vue快速入门(十四)reduce求和

注释很详细,直接上代码

新增内容

  1. 非嵌套情况求和
  2. 嵌套情况求和

源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 挂载点 --><div id="root"><button @click="add1">求第一个数组的和</button><button @click="add2">求第二个数组的和</button></div><!-- 导入vue的js代码 --><script src="./lib/vue2.js"></script><script>const app = new Vue({// Vue实例el: '#root',// 挂载点data: {// 数据arr1:[1,2,3,4,5],arr2:[{id:1,num:5},{id:2,num:6},{id:3,num:7},{id:4,num:8}]},methods: {// 方法add1(){//非嵌套情况求和let sum=this.arr1.reduce((total,curr)=>{return total+curr},0)console.log('第一个数组的和为:'+sum)},add2(){//嵌套情况求和let sum=this.arr2.reduce((total,curr)=>{return total+curr.num},0)console.log('第二个数组的和为:'+sum)}}})</script>
</body>
</html>

效果演示

在这里插入图片描述

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

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

相关文章

C++第十五弹---string基本介绍(一)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 目录 1、什么是STL 2、STL的版本 3、STL的六大组件 4、STL的重要性 5、如何学习STL 6、STL的缺陷 7、为什么学习string类 7.1、C语言中的字符串…

Google play开发者新手必看:2024最新最全的谷歌上架避坑指南

Google Play作为一个全球性的Android应用分发平台&#xff0c;吸引了无数开发者的目光。据统计&#xff0c;该平台的月活跃用户数已超过20亿&#xff0c;这无疑是一个巨大的市场。 但随着行业的发展&#xff0c;谷歌风控和审核机制不断升级&#xff0c;即便是经验丰富的开发者也…

Nginx配置文件修改结合内网穿透实现公网访问多个本地web站点

文章目录 1. 下载windows版Nginx2. 配置Nginx3. 测试局域网访问4. cpolar内网穿透5. 测试公网访问6. 配置固定二级子域名7. 测试访问公网固定二级子域名 1. 下载windows版Nginx 进入官方网站(http://nginx.org/en/download.html)下载windows版的nginx 下载好后解压进入nginx目…

抖音评论ID提取工具|视频关键词评论批量采集软件

抖音评论ID提取工具&#xff1a;批量抓取抖音评论 抖音评论ID提取工具是一款功能强大的软件&#xff0c;可以帮助您批量抓取抖音视频下的评论信息。通过输入关键词和评论监控词&#xff0c;即可进行评论的抓取&#xff0c;并提供评论昵称、评论日期、评论内容、命中关键词以及所…

【CSDN活动】人工智能:前沿科技中的创业机遇与挑战

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 人工智能&#xff1a;前沿科技中的创业机遇与挑战一、AI技术的快速发展与应用拓…

QML学习记录:并排页面切换效果的实现

定义一个ApplicationWindow窗口&#xff0c;通过添加SwipeView和PageIndicator来实现页面切换效果和显示当前页面位置的指示器。 ApplicationWindow {id:rootvisible: truewidth: 340height: 480title: qsTr("SwipeView") // 定义一个SwipeView用于页面切换效果 Swip…

Oracle ADG主备切换

文章目录 一、主库切换备库二、备库切换主库三、新备库&#xff08;原主库&#xff09;启用实时日志应用四、新主库切换日志五、查看当前主备库状态 一、主库切换备库 # 查看切换前的状态&#xff0c;确认当前从操作的是主库 select name,open_mode,switchover_status from v$…

无人机倾斜摄影技术在智慧城市中的应用

随着智慧城市的不断发展和完善&#xff0c;新兴热门技术也不断崛起。无人机技术作为其中之一&#xff0c;具有操作简单、应用灵活等优势&#xff0c;受到了各个行业的青睐。现阶段&#xff0c;无人机技术与5G移动通信系统、人工智能系统深度融合&#xff0c;实现了无人机技术的…

LLMs之FreeGPT35:FreeGPT35的简介、安装和使用方法、案例应用之详细攻略

LLMs之FreeGPT35&#xff1a;FreeGPT35的简介、安装和使用方法、案例应用之详细攻略 目录 FreeGPT35的简介 FreeGPT35的安装和使用方法 1、部署和启动服务 Node 2、使用 Docker 部署服务&#xff1a; 运行 Docker 容器以部署服务 使用 Docker Compose 进行更方便的容器化…

抖音视频无水印采集软件|视频关键词批量提取工具

轻松实现抖音视频批量下载&#xff0c;让营销更高效&#xff01; 随着抖音视频在营销领域的日益普及&#xff0c;如何高效地获取并管理大量视频资源成为了市场人员的重要挑战。针对这一需求&#xff0c;我们推出了一款强大的音视频无水印采集软件&#xff0c;帮助您轻松实现批量…

C++笔记:学习使用C++

一.命名空间 namespace 名字 作用&#xff1a;一种用来隔离命名冲突的机制&#xff0c;是C的一项特性 例如&#xff1a; #include<iostream>namespace A {void func_1() {printf("hello world A\n");return ;} }namespace B {void func_1() {printf("hell…

MySQL——查询数据的处理

一、并列 连接两个数据列的值&#xff0c;并进行输出的格式化处理&#xff08;显示为一种统一的格式&#xff09; concat( 列 1 格式化字 符 ) mysql> select concat(vend_name, vend_country) from vendors; --------------------------------- | concat(vend_name, ve…

某211大学src挖掘

信息收集 这次信息收集比较玄学&#xff0c;起初就是用谷歌语法搜了一下带注册功能的点 然后就找到了本次目标站的注册点: 这边的学号啥的我都是不知道的而且这边最后显示的不是注册&#xff0c;显示的是提交所以可以断定注册账号得需要管理员审核信息才能注册&#xff0c;所以…

【Unity渲染】渲染管线原理

整理自B站UPKerry佬的视频【【教程】技术美术入门&#xff1a;渲染管线概述】 https://www.bilibili.com/video/BV1Q54y1G7v3/?share_sourcecopy_web&vd_source7e6249c05fba6efe32e8867373f75917 应用阶段 、几何阶段顶点处理、光栅化、片元处理、输出合并 应用阶段是CUP…

独家原创 | SCI 1区 高创新轴承故障诊断模型!

往期精彩内容&#xff1a; Python-凯斯西储大学&#xff08;CWRU&#xff09;轴承数据解读与分类处理 Python轴承故障诊断 (一)短时傅里叶变换STFT Python轴承故障诊断 (二)连续小波变换CWT_pyts 小波变换 故障-CSDN博客 Python轴承故障诊断 (三)经验模态分解EMD_轴承诊断 …

机器学习知识点

1鸢尾花分类 鸢尾花分类问题是一个经典的机器学习问题&#xff0c;旨在根据鸢尾花的花萼长度、花萼宽度、花瓣长度和花瓣宽度等特征&#xff0c;将鸢尾花分成三个品种&#xff1a;山鸢尾&#xff08;setosa&#xff09;、变色鸢尾&#xff08;versicolor&#xff09;和维吉尼亚…

【C++】——list的介绍及使用 模拟实现

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 文章目录 前言 一、list的介绍及使用 1.1 list的介绍 1.2 list的使用 1.2.1 list的构造 1.2.2 list iterator的使用 1.2.3 list capacity 1.2.4 list element access 1.…

展厅施工需考虑的重要因素

1、明确目标和主题 展厅的设计应该以公司历史为线索&#xff0c;通过展品、图片、文字等方法向观众传达公司的发展历程和价值观。在设计过程中&#xff0c;需要根据公司的特点和需求来确定展览的主题&#xff0c;并且合理规划展厅空间&#xff0c;使其呈现出连贯性和逻辑性。 2…

选择IP代理时需要避开哪些误区?

选择IP代理时&#xff0c;许多用户可能会因为对代理服务的不了解而陷入一些误区。这些误区不仅可能影响代理服务的效果&#xff0c;还可能带来安全风险。以下是一些在选择IP代理时需要避开的误区&#xff1a; 第一点是一个常见的误区是过于追求低价&#xff1a;市场上有很多代…

OpenEuler简介与安装

OpenEuler简介与安装 OpenEuler是华为推动的一个免费开源的Linux发行平台。这篇文章简单介绍一下OpenEuler的基本信息&#xff0c;并以当前最新的20.09版本为例&#xff0c;并进行一下x86架构下虚拟机下的安装体验。 基本信息 OpenEuler的基本信息如下所示&#xff1a; 项目…