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

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

作者:狐狸家的鱼

本文链接:vue实战-实现购物车功能(三)

GitHub:sueRimnvue实战记录(三)-  vue实现购物车功能之渲染商品列表

vue实战记录(三)-  vue实现购物车功能之渲染商品列表模仿网页考拉的购物车样式进行了一些修改,以上图片就是渲染后的效果。

一、cart.js获取数据

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

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

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

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>
上一篇:windows 2008 R2 64位系统,找到Microsoft Excel 应用程序


下一篇:PATH变量