慕课网vue-购物车案例

window.vm = new Vue({
    el: "#app"
    , data: {
        showModal: false
        , productList: []
        , totalMoney: 0
        , checkAll: false
        , currentProduct: ""
    }
    , mounted: function () {
        var _this = this;
        this.cartView();
    }
    , filters: {
        formatMoney: function (value, quentity) {
            if(!quentity){
                quentity = 1;
            }
            return "¥ "+ (value * quentity).toFixed(2) + "元";
        }
    }
    , methods: {
        cartView: function () {
            this.$http.get("data/cartData.json").then(function (response) {
                var res = response.data;
                if(res && res.status == '1'){
                    this.productList = res.result.list;
                    this.calcTotalMoney();
                }
            });
        }
        , selectAll: function (isCheck) {
            this.checkAll = isCheck;
            this.productList.forEach(function (item) {
                if(typeof item.checked == "undefined"){
                    $.set(item, "checked", isCheck);
                }else{
                    item.checked = isCheck;
                }
            })
            this.calcTotalMoney();
        }
    }
});

<!--参数绑定-->
v-bind:class="{'check':product.checked}" v-on:click="selectedProduct(product)"

<!--总金额 filters格式化-->
<div class="item-price-total">
  {{product.productPrice | formatMoney(product.productQuentity)}}
</div>