阿菜的Vue学习之旅（六）

问题：当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;
        }
    }
})

- - -运行结果：

—————————————————————————— —

上一篇
阿菜的Vue学习之旅（五）
下一篇
阿菜的Vue学习之旅（七）