vue实战记录（三）- vue实现购物车功能之渲染商品列表

vue实战，一步步实现vue购物车功能的过程记录，课程与素材来自慕课网，自己搭建了express本地服务器来请求数据

作者：狐狸家的鱼

本文链接：vue实战-实现购物车功能（三）

GitHub：sueRimn

 模仿网页考拉的购物车样式进行了一些修改，以上图片就是渲染后的效果。

一、cart.js获取数据

通过AJAX获取本地的json数据，这里会出现跨域问题，还好提前搭建了本地服务器，可以成功获取数据渲染界面。

当通过get获取地址数据时，可以在调试界面看到我们需要的数据有哪些，从而获取数据的id，

 

this有可能代表不同的对象,而我们希望_this代表最初的对象，所以声明：

扫描二维码关注公众号，回复： 5130150 查看本文章

let _this = this;

而我们需要获取商品列表，所以需要把获取到的数据赋给data，然后渲染到界面。

_this.productList = res.data.result.list;
_this.totalMoney = res.data.totalMoney;

完整代码：

const vm = new Vue({
    el:'#app',
    data: {
        totalMoney: 0,//总金额
        productList: [],//商品列表

    },
    filters: {

    },
    mounted: function() {//挂载 钩子 实例插入文档
        this.cartView();
    },
    methods: {
        cartView: function() {
            let _this = this;
            //获取数据，返回结果
            this.$http.get("../data/cartData.json", {"id":123}).then(res => {
                _this.productList = res.data.result.list;
                _this.totalMoney = res.data.totalMoney;
            });
        }
    },
})

二、渲染界面

在渲染的地方都做了相应的注释

 </div>
                <ul class="cart-item-list">
                  <!-- 列表渲染-对象渲染 -->
                  <li v-for="(item, index) in productList" :key="index">
                    <div class="cart-tab-1">
                      <div class="cart-item-check">
                        <a href="javascript:void 0" class="item-check-btn">
                          <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
                        </a>
                      </div>
                      <div class="cart-item-pic">
                        <!-- 商品图片 -->
                        <img :src="item.productImage" alt="口红">
                      </div>
                      <div class="cart-item-title">
                        <!-- 商品名字 -->
                        <div class="item-name">{{item.productName}}</div>
                      </div>
                      <div class="item-include">
                        <dl>
                          <dt>赠送:</dt>
                          <!-- 赠品 -->
                          <dd v-for="part in item.parts" v-text="part.partsName" :key="item.id"></dd>
                        </dl>
                      </div>
                    </div>
                    <div class="cart-tab-2">
                      <!-- 商品单价 -->
                      <div class="item-price">{{item.productPrice}}</div>
                    </div>
                    <div class="cart-tab-3">
                      <div class="item-quantity">
                        <div class="select-self select-self-open">
                          <div class="quantity">
                            <a href="javascript:void 0"></a>
                            <!-- 商品数量 -->
                            <input type="text" value="0" disabled v-model="item.productQuantity">
                            <a href="javascript:void 0" @click="add">+</a>
                          </div>
                        </div>
                        <div class="item-stock">有货</div>
                      </div>
                    </div>
                    <div class="cart-tab-4">
                      <!-- 商品总金额=单价*数量 -->
                      <div class="item-price-total">{{item.productPrice*item.productQuantity}}</div>
                    </div>
                    <div class="cart-tab-5">
                      <div class="cart-item-operation">
                        <a href="javascript:void 0" class="item-edit-btn">
                          <svg class="icon icon-del"><use xlink:href="#icon-del" ></use></svg>
                        </a>
                        <p>移入我的收藏</p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>