vue-购物车-白红宇

vue-购物车

阅读量：5268 次

发布时间：2019-06-14

本文共 2056 字，大约阅读时间需要 6 分钟。

最终的实现效果：

需求分析：

购物车需要展示一个已加入购物车的商品列表，包含商品名称，商品单价，购买数量和操作等信息，还需要实时显示购买的总价。其中购买数量可以增加或减少，每类商品还可以从购物车中移除。

一：创建一个根元素来挂载Vue实例：

    
         购物车

这里将vue.min.js写在<body>的底部，如果写在<head>里，Vue实例将无法创建，因为此时DOM还没有被解析完成。

二：

将界面渲染出来

    
         购物车    
         
      
                                                                         商品名称                      商品单价                      购买数量                      操作                 
               
                                                    {
   {index+1}}                      {
   {item.name}}                      {
   {item.price}}                                                      {
    {item.count}}

	商品名称	商品单价	购买数量	操作
{ {index+1}}	{ {item.name}}	{ {item.price}}	{ {item.count}}

这一步可以将表格渲染出来，接下来开始操作功能

三：

增加和减少商品数量

         {
    {item.count}}

handleReduce:function (index) {                this.list[index].count--;            },            handleAdd:function (index) {                this.list[index].count++;            }

当数量为0的时候，不再减少，可以按钮还需要这样：

移除功能：

handleRemove:function (index) {    this.list.splice(index,1)}

四：

再做一个总价得功能


     
      {
   {totalPrice}}

computed:{            totalPrice:function () {                var sunm=0;                for(var i=0;i

基本实现

源码：

	商品名称	商品单价	购买数量	操作
{ {index+1}}	{ {item.name}}	{ {item.price}}	{ {item.count}}

转载于:https://www.cnblogs.com/QianBoy/p/7953645.html

你可能感兴趣的文章