用Vue2.0实现一个简单的购物车页面

在学习Vue的初级阶段,练习一个小的应用,即用Vue实现一个购物车页面。在学习过程中,能极大地体会到Vue的强大和方便,用更少的代码渲染完整的页面,减少了HTML代码的冗余。

首先,写出一个购物车页面的大致样式,相关代码及页面展示如下所示。





购物车





购物车

全选
商品
数量
单价(元)
金额(元)
操作
【一米阳光】碎花雪纺连衣裙中长款夏装复古喇叭袖百褶裙子收腰衬衫裙

小立领V领荷叶边百褶裙摆小喇叭袖

材质成分: 聚酯纤维100%  裙型: 百褶裙

配送仓储:浙江杭州仓储

200.00

200.00

删除
删除所选商品 继续购物

2件商品总计(不含运费):

1600

去结算

用Vue2.0实现一个简单的购物车页面_第1张图片

然后,将页面中的数据用Vue实现绑定,渲染页面。并书写相关方法,实现商品的选择以及商品数量、商品运费和商品总额等的结果显示。完整代码以及页面展示如下所示:





Shopping Cart
	



购物车(共有({{numGoods}})件商品)

{{item.name}}

选择 商品 数量 单价 运费 操作
{{item1.des}}
- +
¥{{item1.price.toFixed(2)}} ¥{{item1.fare.toFixed(2)}} 删除

店铺总运费:¥

商品总金额:¥

用Vue2.0实现一个简单的购物车页面_第2张图片

 

你可能感兴趣的:(Vue)