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>

效果演示

在这里插入图片描述

下一篇

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ZYNQ7000 PL与PS交互总结

这里写目录标题 一、ZYNQ7000整体框架二、AXI总线与接口2.1 AXI总线协议分类2.1.1 AXI_Lite协议2.1.2 AXI_Full协议2.1.3 AXI_Stream协议 2.2 AXI接口分类 三、PS与PL交互方式总结3.1 PL中断3.2 AXI_Lite协议配合AXI GP接口进行寄存器访问3.3 AXI_Full协议配合AXI HP接口进行内…

Flutter第七弹 网格列表GridView

1) Flutter提供了网格列表&#xff0c;怎么设置列数&#xff1f; 2&#xff09;怎么初始化每个列表项Item&#xff1f; 一、GridView简介 Flutter也存在网格列表组建GridView&#xff0c;用于展示多行多列的列表。 1.1 GridView构建 采用GridView.count() 进行构建 1.2 Gr…

模型训练基本概念-赛博炼丹

文章目录 拓展知识基础名词解释&#xff08;语义库更新&#xff09;机器学习任务流程模型训练基本流程模型训练详细流程正向传播与反向传播正向传播-求误差值反向传播-求参数值 学习率激活函数激活函数-为什么希望激活函数输出均值为0&#xff1f;激活函数 — softmax & ta…

Pytorch张量的数学运算:向量基础运算

文章目录 一、简单运算二、广播运算1.广播的基本规则2.广播操作的例子 三、运算函数 参考&#xff1a;与凤行 张量的数学运算是深度学习和科学计算中的基础。张量可以被视为一个多维数组&#xff0c;其在数学和物理学中有广泛的应用。这些运算包括但不限于加法、减法、乘法、除…

312_C++_QT表格的剪切、拷贝、粘贴,轻量化操作

:拷贝 + 粘贴 :剪切 + 粘贴 void CustomTableWidget::cut() {copy();// 获取所有选定的单元格项QList<QTableWidgetItem*> selectedItemsList

若依安装过程

文章目录 参考博客环境准备下载redisjdk1.8下载nacos 后端mysqlnacos运行npm 参考博客 https://blog.csdn.net/qq_31536117/article/details/134603862 环境准备 下载redis 参考https://redis.com.cn/redis-installation.html jdk1.8下载 参考 https://zhuanlan.zhihu.co…

新质生产力与数字化转型:驱动经济转型升级的双引擎

引言 随着时代的发展和科技的进步&#xff0c;新质生产力与数字化转型已成为当今经济转型升级的双引擎。新质生产力代表着经济发展的内在动力&#xff0c;数字化转型则为其提供了技术支撑和路径指引。本文将探讨新质生产力与数字化转型的概念&#xff0c;并分析它们对经济发展的…

读所罗门的密码笔记16_直通心智

1. 直通心智 1.1. 如今&#xff0c;科学家已经可以诱发触觉、压觉、痛觉和大约250种其他感觉 1.1.1. DARPA支持的触觉技术第一次让一位受伤的人能够用假肢和手指感知到被触碰的物体 1.1.2. 可以建立人工系统&#xff0c;来替换和弥补受损大脑的部分区域 1.1.3. 神经科学家能…

基于springboot实现医院管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现医院管理系统演示 摘要 随着信息互联网信息的飞速发展&#xff0c;医院也在创建着属于自己的管理系统。本文介绍了医院管理系统的开发全过程。通过分析企业对于医院管理系统的需求&#xff0c;创建了一个计算机管理医院管理系统的方案。文章介绍了医院管理系…

【Qt编译】ARM环境 Qt5.14.2-QtWebEngine库编译 (完整版)

ARM 编译Qt5.14.2源码 1.下载源码 下载Qt5.14.2源代码&#xff08;可根据自己的需求下载不同版本&#xff09; 下载网站&#xff1a;https://download.qt.io/new_archive/qt/5.14/5.14.2/single/ 2.相关依赖(如果需要的话) 2.1 QtWebEngine相关依赖 sudo apt-get instal…

思科模拟器——跨交换机划分vlan

参考博客 一、原理图 二、划分vlan 将Switch0的f0/1和f0/2端口划到vlan10 具体端口看自己连的端口&#xff0c;Options → Prefrences → 勾选Always Show Port Labels。Ctrl R快捷打开Prefrences。 xialin>enable //进入特权模式 xialin#configure terminal //进入全局…

Python | Leetcode Python题解之第21题合并两个有序链表

题目&#xff1a; 题解&#xff1a; class Solution:def mergeTwoLists(self, l1: ListNode, l2: ListNode) -> ListNode:prehead ListNode(-1)prev preheadwhile l1 and l2:if l1.val < l2.val:prev.next l1l1 l1.nextelse:prev.next l2l2 l2.next pr…

java算法day50 | ● 123.买卖股票的最佳时机III ● 188.买卖股票的最佳时机IV

123.买卖股票的最佳时机III 思路&#xff1a; 这道题的关键就是如何设置dp数组的状态。用五种状态表示对股票持有或售出的不同阶段。代码随想录讲解视频 class Solution {public int maxProfit(int[] prices) {int[][] dpnew int[prices.length][5];dp[0][0]0;dp[0][1]-prices…

成功解决> 错误: 无效的源发行版:17

运行项目的时候出现下面的报错&#xff1a; Execution failed for task ‘:device_info_plus:compileDebugJavaWithJavac’. 错误: 无效的源发行版&#xff1a;17 原因&#xff1a;没有设置好自己项目的JDK版本 解决&#xff1a;1.检查自己项目的JDK版本 将自己的项目改为JDK 1…

09 Php学习:数组和排序

数组概念 在PHP中&#xff0c;数组是一种复合数据类型&#xff0c;用于存储多个值。以下是关于PHP数组的详细解释&#xff1a; 索引数组&#xff1a;索引数组是最基本的数组类型&#xff0c;其中每个元素都有一个唯一的数字索引&#xff0c;从0开始递增。 关联数组&#xff…

总结C/C++中程序内存区域划分

C/C程序内存分配的几个区域&#xff1a; 1. 栈区&#xff08;stack&#xff09;&#xff1a;在执行函数时&#xff0c;函数内局部变量的存储单元都可以在栈上创建&#xff0c;函数执行结束时这些存储单元自动被释放。栈内存分配运算内置于处理器的指令集中&#xff0c;效率很⾼…

电脑无法开机?原因分析与解决方案

电脑无法开机是一种常见的问题&#xff0c;可能会给用户带来诸多困扰。无法启动可能是由于硬件故障、软件问题或者其他未知原因引起的。在本文中&#xff0c;我们将介绍三种常见的方法来解决电脑无法开机的问题&#xff0c;以帮助用户尽快恢复正常使用。 方法1&#xff1a;检查…

c语言例题,计算1/1-1/2+1/3-1/4+1/5……+1/99-1/100的值,打印结果

例题&#xff1a;计算分式1/1-1/21/3-1/41/5……1/99-1/100的值&#xff0c;打印结果 根据题目&#xff0c;我们知道需要计算的是一个固定值&#xff0c; 先定义三个变量来当作分式里的三个值&#xff0c;变量i当作分式里的分母部分&#xff0c;通过for循环来实现分母每次循环…

vue3基础知识

网站 168张图&#xff0c;万字长文&#xff0c;手把手教你开发vue后台管理系统&#xff01;-腾讯云开发者社区-腾讯云 Overview 组件总览 | Element Plus Vue.js - 渐进式 JavaScript 框架 | Vue.js 安装 Node.js 下载直接安装&#xff0c;自动包含 npm。 Node.js — Run…

【讲解下目标追踪】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…