vue中reduce属性的使用@3@

1.reduce方法

​ reduce方法的使用(数组方法): 遍历数组,求和

​ 语法:数组名.reduce((pre,current) => {},参数2)

​ pre:上次执行该方法的返回值

​ current:数据项

​ 实例代码:

javascript 复制代码
let shoppingCart = [
  {name: 'Vuejs入门', price: 99, count: 3},
  {name: 'Vuejs底层', price: 89, count: 1},
  {name: 'Vue从入门到放弃', price: 19, count: 5},
];

let totalPrice = shoppingCart.reduce((total, item) => {
  console.log(total,item.price) // 
  return total + item.price * item.count;
}, 0); // 初始值为0,表示从第一个元素开始累加

console.log(totalPrice); // 输出总价:481

// 第一个console.log打印的 0 99 
                          297 89 
                          386 19 

// 第二个console.log打印的 输出总价:481
2.Vue的计算属性

存放属性(以函数的形式)

当一个值受其他值影响的时候,就会将这个值写在计算属性当中

有效缓存效果:只执行一次

在Vue模板中,你可以将这个计算属性绑定到一个数据属性上,以便在页面上显示:

javascript 复制代码
<div id="app">
  <p>总价: {{ totalPrice }}</p>
</div>

<script>
  new Vue({
    el: '#app',
     {
      shoppingCart: [ /* ...购物车数据... */ ]
    },
    computed: {
      totalPrice() {
        return this.shoppingCart.reduce((total, item) => {
          return total + item.price * item.count;
        }, 0);
      }
    }
  });
</script>
相关推荐
理想不理想v1 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我2 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记15 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜16 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=16 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧18 分钟前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck20 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!41 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui