vue实战记录（三）- vue实现购物车功能之渲染商品列表
vue实战，一步步实现vue购物车功能的过程记录，课程与素材来自慕课网，自己搭建了express本地服务器来请求数据
作者：狐狸家的鱼
本文链接：vue实战-实现购物车功能（三）
GitHub：sueRimn
模仿网页考拉的购物车样式进行了一些修改，以上图片就是渲染后的效果。
一、cart.js获取数据
通过AJAX获取本地的json数据，这里会出现跨域问题，还好提前搭建了本地服务器，可以成功获取数据渲染界面。
当通过get获取地址数据时，可以在调试界面看到我们需要的数据有哪些，从而获取数据的id，
this有可能代表不同的对象,而我们希望_this代表最初的对象，所以声明：
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>