javascript - vuejs统计金额总和,使用计算属性吗?
伊谢尔伦
伊谢尔伦 2017-04-11 10:05:41
0
2
750

目前有这么个需求:
订单结算页面有多个订单。
我想通过订单各自的价格*数量,然后相加得出总共需要支付的金额,怎么计算?
//最后显示提示用户:总额:xxx元,去支付。
使用vuejs的computed属性进行计算吗?
那怎么循环多个订单进行乘法加法?

数据:

{
    "status": 1,
    "info": "订单信息",
    "data": [
        {
            "dcprice": null,
            "kitchen_status": "0",
            "discount_items": "1",
            "discount_id": "",
            "status": "0",
            "choice_dish_ingredients": "",
            "choice_taste": "",
            "price": "55.00",
            "quantity": "1.00",
            "give_quantity": "0.00",
            "cancel_quantity": "0.00",
            "dish_name": "菜品3",
            "pic": "",
            "dish_price": "55.00",
            "discount": "0.00",
            "introduce": "  ",
            "type": "1",
            "taste_name": null,
            "classify_name": "jjj",
            "type_name": "菜类型1"
        },
        {
            "dcprice": null,
            "kitchen_status": "0",
            "discount_items": "1",
            "discount_id": "",
            "status": "0",
            "choice_dish_ingredients": "",
            "choice_taste": "",
            "price": "4.00",
            "quantity": "2.00",
            "give_quantity": "0.00",
            "cancel_quantity": "0.00",
            "dish_name": "菜品1",
            "pic": "",
            "dish_price": "4.00",
            "discount": "0.00",
            "introduce": "   ",
            "type": "1",
            "taste_name": null,
            "classify_name": null,
            "type_name": "菜类型2"
        }
    ]
}

然后我的vue实例:

//dishorder 就是存着上面数据的变量
    new Vue({
        el:'#js_show_footer',
        data:dishorder,
        computed:{
            //计算总价,用于显示
            _price:function () {
                var allPrice=0;
                var i=0;
                //下面怎么写?
                /*for(){
                
                }*/
                return allPrice;
            }
        }
    });
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

répondre à tous(2)
左手右手慢动作

注意这几个属性:
循环this.$data.data 或者 this.data计算

黄舟

对于简单操作后仅做显示,可以用filter来实现

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal