本人看了vue官网上的教程后，感觉对vue的依稀有点了解，决定动手练习个小功能项目，就找了购物车本项目。

原文链接：http://blog.csdn.net/take_dream_as_horse/article/details/69942013
就找了这个小项目练习，在原项目的基础上做了如下进一步完善
1.增加了商品数量，合计金额(computed计算属性)
2.修改商品单价合计金额同步变化，增加商品(v-model)，
3.增减商品数量(methods)
4.绑定button class背景，根据商品是否已经加入到购物车，动态显示button背景（就是v-bind:class的实际应用）。
5.删除单列商品(object.splice(index,1))
6.添加商品到商品列(对象浅拷贝用到的是object.assign({},obj),深拷贝var obj = JSON.stringify(this.newProduct);this.goods.push(JSON.parse(obj));//深拷贝)

。目前就做了这些改动，就是当练习。

源码：shopping_cart.js

 //var newProduct = {name:'',color:'',price:0,amount:0,default_nums:1,add_nums:0,ischange:'btn-danger'};

 // 商品列表json

 var goodsTable = new Vue({

   el: '#goods-table',

   data: {

     // 用于保存每件商品的对象

     goodItem: {},

       // 用于保存用户添加到购车的商品数组

       buyLists: [],

       // 默认的商品列表

     goods: [

       {name:'iphone 7 plus 手机',color:'银色',price:100,amount:0,default_nums:1,add_nums:0},

         {name:'华硕笔记本电脑',color:'黑色',price:100,amount:0,default_nums:1,add_nums:0},

         {name:'九阳电热水瓶5L',color:'白色',price:100,amount:0,default_nums:1,add_nums:0}

     ],

     //用于增加新商品到列表

     newProduct: {name:'',color:'',price:0,amount:0,default_nums:1,add_nums:0,ischange:'btn-danger'},

   },

   computed: {

     count: function() {

       var num = 0;

       for(var i in this.goods){

           num += parseInt(this.goods[i].default_nums);

       }

       return num;

     },

     total: function() {

       var total = 0;

       for(var i in this.goods){

           total += parseInt(this.goods[i].price * this.goods[i].default_nums);

       }

       return total;

     },

     addShoppingNum: function() {

       var addShoppingNum = 0;

       for(var i in this.goods){

           addShoppingNum += this.goods[i].add_nums;

       }

       return addShoppingNum;

     },

     costPaid: function() {

         var costPaid = 0;

         for(var i in this.goods){

           costPaid += parseInt(this.goods[i].price * this.goods[i].add_nums);

       }

       return costPaid;

     }

   },

   methods: {

     reduce: function(good) {

       if (good.default_nums <= 1) return;

       good.default_nums --;

       //good.ischange = 'btn-danger';

     },

     addNum: function(good) {

       good.default_nums += 1;

       //good.ischange = 'btn-danger';

     },

     addProduct: function() {

       //var len = this.goods.length;

       //追加商品

       //this.goods.push(Object.assign({},this.goods[len-1]));//浅拷贝

       //this.goods.push(Object.assign({}, this.newProduct));//浅拷贝

       var obj = JSON.stringify(this.newProduct);

       this.goods.push(JSON.parse(obj));//深拷贝

     },

     removeProduct: function(good,index) {

       //删除商品

       this.goods.splice(index,1);

     },

       addToCar(good) {

           if(good.add_nums == good.default_nums) return;

           good.add_nums = good.default_nums;

       //good.ischange = 'btn-success';

       this.goodItem = {name: good.name, nums: good.add_nums};

       // 创建用户当前添加的商品对象

           // 开始向数组中提添加当前物品，这里存在3种情况

       // 1、用户未添加过该商品，则直接向数组中push

       // 2、用于已经添加了该商品、并且未做购买数量修改，则不向数组中添加

       // 3、用于已经添加了该商品、但是修改了购买数量，直接替换数组中的该商品对象

       var index = this.buyLists.findIndex((value, index, arr) => {

          return value.name === this.goodItem.name;

       });

       //Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

       index === -1 ? this.buyLists.push(this.goodItem) : Object.assign(this.buyLists[index], this.goodItem);

     },

     balance() {

       console.log(this.buyLists);

     }

   }

 })

源码：shopping_cart.html

 <!DOCTYPE html>

 <html>

 <head>

     <title>添加购物车商品列表</title>

     <meta charset="utf-8" />

     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

     <style type="text/css">

         [v-cloak]{ /*防止页面闪烁*/

             display: none !important;

         }

         .content{

             width: 1000px;

             margin: 100px auto;

         }

         .sWidth{

             width:50px;

         }

     </style>

 </head>

 <body>

     <div class="content">

         <!-- 商品列表 -->

         <table class="table table-bordered" id="goods-table" v-cloak>

             <thead>

                 <th>序号</th>

                 <th>商品名称</th>

                 <th>颜色</th>

                 <th>数量</th>

                 <th>单价</th>

                 <th>金额</th>

                 <th>操作</th>

             </thead>

             <tbody>

                 <tr v-for="(good, index) in goods">

                     <td>{{ index+1 }}</td>

                     <td><input v-model="good.name"></td>

                     <td><input class="sWidth" v-model="good.color"></td>

                     <td>

                         <button v-on:click="reduce(good)">-</button>

                         <input type="text" type="number"  v-model="good.default_nums"/>

                         <button v-on:click="addNum(good)">+</button>

                     </td>

                     <td>

                         <input class="sWidth" v-model="good.price"></span>

                     </td>

                     <td>

                         <span>{{good.price*good.default_nums}}</span>

                     </td>

                     <td>

                         <button class="btn btn-sm" v-bind:class="good.default_nums == good.add_nums ? 'btn-success' : 'btn-danger'" v-on:click="addToCar(good)">加入购物车</button>

                         <span>已加入购物车的该商品数量:</span>

                         <span>{{good.add_nums}}</span>

                         <button class="btn btn-sm btn-danger" v-on:click="removeProduct(good,index)">删除</button>

                     </td>

                 </tr>

             </tbody>

             <tfoot>

                 <tr>

                     <td colspan="7">

                         <button class="btn btn-danger" v-on:click="addProduct()">添加商品</button>

                         <span>合计数量{{count}}件</span>

                         <span>合计金额{{total}}元</span>

                         <b>||</b>

                         <span>购物车{{addShoppingNum}}件</span>

                         <span>花费{{costPaid}}元</span>

                         <button class="btn btn-danger pull-right" v-on:click="balance()">结算</button>

                     </td>

                 </tr>

             </tfoot>

         </table>

     </div>

     <!-- js -->

     <script type="text/javascript" src="js/vue.js"></script>

     <script type="text/javascript" src="js/shopping_cart.js"></script>

 </body>

 </html>

页面显示效果：

github地址：https://github.com/double2018/shopping_cart/

vue 购物车练习的更多相关文章

  1. Vue购物车实例

    <div class="buyCarBox" id="buyCarBox" v-cloak> <div class="haveClo ...

  2. vue购物车和地址选配（三）

    参考资料:vue.js官网 项目演示: 项目源代码: 核心代码及踩坑 删除: new Vue({ el:'#app', data:{ productlist:[], totalMoney:0, che ...

  3. vue购物车功能源码

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  4. Vue购物车

    index.html <!DOCTYPE html><html>    <head>        <meta charset="utf-8&quo ...

  5. VUE购物车示例

    代码下载地址:https://github.com/MengFangui/VueShoppingCart 1.index.html <!DOCTYPE html> <html lan ...

  6. vue购物车的实现

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue购物车动画效果

    使用动画的三个函数 v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter=&q ...

  8. 第八十三篇：Vue购物车(四) 总价计算

    好家伙, 1.总价计算 来了,又先是一波分析: 我们用一个计算属性amt 我们把item中被勾选的项用一个过滤器过滤器来 然后用一个循环相加,把商品的价格乘以商品的数量, 把这个总值返回出去, 然后组 ...

  9. 第八十二篇：Vue购物车(三) 实现全选功能

    好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...

随机推荐

  1. angular封装七牛云图片上传，解决同一页面多个上传按钮分别上传

    step1:引入文件 引入Plupload *该SDK上传功能集于Plupload插件封装,所以需要下载Plupload; plupload.dev.js 引入qiniu.js为了简便,当时直接从官网 ...

  2. 查看SQL Server当前会话的隔离级别

    查看SQL Server当前会话的隔离级别 DBCC USEROPTIONS

  3. intellij IDEA里各图标对应的文件类型

    本篇内容为大家提供的是IntelliJ IDEA 使用教程中的常见文件类型的图标介绍,IntelliJ IDEA是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一, ...

  4. IDEA Translation插件中有道智云（有道翻译）应用ID，密钥申请教程

    登录链接 该登录登录,该注册注册(信息随意填写) 自然语言翻译=>翻译实例=>创建实例(信息随意填写) QQ截图20170701231552.png 应用管理=>我的应用=>创 ...

  5. ASP.NET.Core中使用AutoMapper

      首先需要在NuGet中引用AutoMapper的类库 install-package AutoMapper install-package AutoMapper.Extensions.Micros ...

  6. 随笔：JavaScript函数中的对象----arguments

    关于arguments 调用函数时,如果需要传参,其实参数就是一个数组,在函数体的内置对象arguments可以访问这个数组,如: arguments[0]:第一个参数 arguments[1]:第二 ...

  7. 【二十六】php之文件编程

    1.获取文件的相关信息 fopen.fstat.fclose(打开文件.获取文件相关信息.关闭文件) filesize.filectime.filemtime.fileatime(文件大小.上次cha ...

  8. 点分治X2

    1.聪聪可可 点分治板子 然而想那个 t1[1]*t1[2]*2+t1[0]*t1[0]想了好久 就是最基本的组合方法 毕竟(2,5)和(5,2)可是要算两次的 画画图就好了 (不要像我一样盯着大佬们 ...

  9. 学会C sharp计算机编程语言 轻松开发财务、统计软件

    就像人们用同一种语言才可以顺畅交流一样,语言是计算机编程的根本,是IT世界交流的工具.运用这些计算机语言,人们可以创造出一个美妙的世界.你点击某个网页或是安装一个应用程序软件,这简简单单动作的背后,就 ...

  10. SecureCRT连接本地的Vmware虚拟机（CentOS）时提示连接超时“Connection timed out”

    测试了一下,直接在Vmware的VM里面可以ping通宿主机. 但是宿主机无法ping通VM. 后面发现是本地的网络设置里面的vmware的NAT的网卡设置了手工填写地址和DNS. 修改为自动获取.问 ...