# vue-购物车案例

**Repository Path**: tarxyz/vue-checkout

## Basic Information

- **Project Name**: vue-购物车案例
- **Description**: 慕课网vue-购物车案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://imzdx.gitee.io/vue-checkout/cart.html
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-01-03
- **Last Updated**: 2021-04-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


慕课网vue-购物车案例
=========

### 成品展示

![GIF](https://gitee.com/uploads/images/2018/0103/101913_e8bf8fcf_496317.gif "GIF.gif")



## vue核心代码

```javascript
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();
        }
    }
});
```



### 页面调用

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

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