Vue遍历data中含某个字段，并累加、算总数

最新推荐文章于 2024-08-21 08:58:39 发布

FY18381366936

最新推荐文章于 2024-08-21 08:58:39 发布

阅读量2.1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/FY18381366936/article/details/121539534

版权

在Vue.js应用中，使用`forEach`循环遍历`hostListDetail`数组，通过对字段`hostType`判断为2的项进行累加，从而计算出总数并存储在`sum`变量中。此外，通过总长度减去符合条件的数量，得到`sumnum`，进一步更新`totalDetail`的值。

摘要由CSDN通过智能技术生成

用forEach循环
eg：

//定义                   
let sum = 0;
this.list.forEach((item) => {
   
   //遍历prodAllPrice这个字段，并累加
   sum += item.prodAllPrice;
 }

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

FY18381366936

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

axios vue 动态date_Vue.js使用axios动态获取response里的data数据操作

weixin_39533795的博客

12-22

1890

Vue.js使用axios动态获取response里的data数据操作今天开发时，使用axios返回的response中data有多个数据：如果是获取cn里的数据的，可以用：response.data.cn但是需求是根据选择来获取数据的，会发生变化，最开始的想法是，用一个变量来记录需要获取的key:假设need是需要获取的某个keyconst dkey = this.need;response.d...

Vue遍历data中某个字段并累加，res.result.forEach方法总结

qq_26780317的博客

12-11

7376

前言：在实际的项目中，有时会遇到将data中返回的数据进行累计求和返显。这时，我们就可以使用forEach()方法进行处理。 forEach的定义和方法： forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。注意：forEach()对于空数组是不会执行回调函数的。一、html部分 <div class="tab-content"> <ta...

参与评论您还未登录，请先登录后发表或查看评论

Vue第六篇之Vue遍历data中某个字段，并累加、算总数，总计(this.list.forEach方法实战)

最新发布

Bulut0907

08-21

1260

key可以使用数据的唯一字段(最好)，也可以使用index(默认)旧虚拟DOM中未找到与新虚拟DOM相同的key。这里代码还是和上面的一样，只是修改为。再点击添加一个老刘。再点击添加一个老刘。开发中如何选择key?

Vue 遍历数组中的某一个字段相加求和

HouMengFei_的博客

02-16

1万+

vue 遍历求和使用forEach遍历接口返回的list中的score，然后求总数。

vue 统计某字段出现的次数

唯心所现，唯识所变

12-03

2940

情形：后端传来几个属性值，类型：string。现统计属性值为“1”的个数和为“0”的个数 // 数据统计 let sum = 0 let otherSum = 0 res.data.list.forEach(function (elem, index) { if (elem.strValue === '1') { sum += 1 } else { othe

实现表格自动计算

weixin_34410662的博客

03-03

583

先来看看实时操作动画演示：每一行进行小计，数量 X 单价。而总计则是把表格中小计列所有行进行相加。 Html code: <table id="Order"> <tr> <th>费用名目</th> <th>数量</th> <th&

Vue.js使用axios动态获取response里的data数据操作

10-14

除了动态获取数据，我们还关注到Vue.js中如何遍历data中的字段并进行计算。在Vue中，我们可以使用数组的`forEach`方法来遍历对象数组，并累加特定字段的值。例如，假设`this.list`是一个包含多个对象的数组，每个...

vue实现购物车功能（商品分类）

11-20

通过遍历`lists`和`goods`，对每个商品的数量乘以其价格并累加，同时统计总数量。 3. **方法**： - `leftTap`: 用于切换商品分类的显示，参数`index`代表当前选中的分类索引。 - `showCar`: 控制购物车的显示与...

vue for循环中常见问题之求和（合计）

weixin_30393907的博客

06-06

1万+

例：求后台返回数据this.dataInfo 中某个字段（item.totalSum）的和，只需添加computed,然后模板中直接可以使用totalSumAll (不需要再data中声明) computed:{ totalSumAll(){ let totalSumAll = 0; this.dataInfo.map((item) => {totalSu...

处理数组某个对象里面的字段对象的值相加求和

qq_42384734的博客

04-25

651

数据格式 [ id:1, name:'111', hourValue:{1:"1",2:'2'} ] calcSum(item) { const value = Object.values(item) const sum = value.map((v) => +v).reduce((pre, cur) => pre + cur, 0) return sum.toFixed(2) },

怎样使用Vue计算属性对number属性的数组求和

weixin_43709538的博客

10-26

7869

直接上代码啦 body中 <div id="app"> <input type="number" v-model.number="arr2[0]"><br /> <input type="number" v-model.number="arr2[1]"><br /> <input type="number" v-model.number="arr2[2]"><br /> <input type=

VUE基础知识4：数组的循环v-for

qq_25354709的专栏

01-24

3610

一、使用v-for循环数据 <div id="app"> <ul> <li v-for="(p, index) in person">{{p.name}} {{index+1}}</li> </ul> </div> <script>

vue.js的简单自动求和计算

qq973302682的博客

09-23

1万+

一、导入vue.js 可以用cdn，也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> 二、前端页面我用了一个表格，话不多说直接上代码 <div id="vuetest"> <table&g...

vue学习笔记：三种for循环用法

weixin_45465762的博客

05-18

1134

vue学习笔记：三种for循环用法需求：循环books数组，计算出总价格： price是单价，count是数量。 for的第一种用法，也是最普通的一种： let totalPrice = 0 for (let i = 0; i < this.books.length; i++) { totalPrice += (this.books[i].price) * (this.books[i].count); } return totalPrice

vue求和

海阔天空

03-17

332

<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Foo</h2> <div v-for ="(item, index) in list">  <h1 v-show="false">{{a[index] = item.bb}}&lt

vue对list数据求和reduce

baidu_33471976的博客

11-07

891

{{ item.num }}个礼物总数{{totalCount}} 个名字</th><th>数量

Vue数组操作方法

U_tiger123的博客

10-02

298

// 求总价 return this.list.reduce((sum, obj) => sum += obj.price, 0) // 删除指定id的数据 delFn(id){ // 通过id找到这条数据在数组中下标 let index = this.list.findIndex(obj => obj.id === id) this.list.splice(index, 1) } ...

vue组件递归遍历

叶子树的博客

08-11

4381

实现遍历效果。

用vue2遍历一个array中的两个字段

06-10

可以使用 `v-for` 指令遍历数组，并使用 `template` 定义循环体，然后在循环体中使用双大括号表达式（或者 `v-bind` 指令）来显示数组中的两个字段。示例代码如下： ```html <template> <div> <ul> <li v-for="(item, index) in items" :key="index"> {{ item.field1 }} - {{ item.field2 }} </li> </ul> </div> </template> <script> export default { data() { return { items: [ { field1: 'value1', field2: 'value2' }, { field1: 'value3', field2: 'value4' }, { field1: 'value5', field2: 'value6' } ] } } } </script> ``` 在上面的代码中，`items` 是一个包含多个对象的数组，每个对象中都有两个字段 `field1` 和 `field2`。使用 `v-for` 遍历 `items` 数组，并在循环体中使用双大括号表达式显示每个对象的 `field1` 和 `field2` 字段的值。