阿菜的Vue学习之旅（六）

kokunka

已于 2022-02-27 22:19:05 修改

阅读量363

点赞数

分类专栏： Vue 文章标签： vue.js 学习 javascript

于 2022-02-25 23:18:23 首次发布

本文链接：https://blog.csdn.net/kokunka/article/details/123142916

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客介绍了在Vue.js中如何使用计算属性来计算data对象中数组类型的商品列表总价。通过遍历数组并累加每个商品的单价与数量的乘积，实现了动态计算购物车总价的功能。示例提供了两种不同的遍历方法，即传统的for循环和使用for...in语句，两种方法都能正确计算总价。

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

阿菜的Vue学习之旅（六）

- 问题：当data对象中有一个数组类型的key/value值的时候，如何进行其内部的部分变量的计算？

问题：当data对象中有一个数组类型的key/value值的时候，如何进行其内部的部分变量的计算？

html部分：

 <div class="myShopping">
        <h2>购物之后，我需要支付的价钱为： {{totalPrice}}元</h2>
    </div>

方法一： 主要是看totalPrice属性

const myShopping = new Vue({
    el: '.myShopping',
    data:{
        shopping: [
            {goodsName: '速冻饺子', unitPrice: 7, count: 3},
            {goodsName: '天润牛奶', unitPrice: 2.8, count: 4},
            {goodsName: '蓝月亮洗衣液', unitPrice: 35, count: 1}
        ]
    },
    computed: {
        totalPrice: function () {
            let result = 0;
            for( let i = 0; i < this.shopping.length; i++){
                result += this.shopping[i].unitPrice * this.shopping[i].count;
            }
            return result;
        }
    }
})

方法二：

const myShopping = new Vue({
    el: '.myShopping',
    data:{
        shopping: [
            {goodsName: '速冻饺子', unitPrice: 7, count: 3},
            {goodsName: '天润牛奶', unitPrice: 2.8, count: 4},
            {goodsName: '蓝月亮洗衣液', unitPrice: 35, count: 1}
        ]
    },
    computed: {
        totalPrice: function (){
            let result = 0;
            //for in 语句
            for (let i in this.shopping){
                result += this.shopping[i].unitPrice * this.shopping[i].count;
            }
            return result;
        }
    }
})