本人看了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. CS:APP3e 深入理解计算机系统_3e bomblab实验

    bomb.c /*************************************************************************** * Dr. Evil's Ins ...

  2. mango（mango ORM框架介绍）

    官网地址:http://www.jfaster.org/ mango的中文名是"芒果",它是一个极速分布式ORM框架.目前已有十多个大型线上项目在使用mango,在某一支付系统中, ...

  3. 《软件开发者路线图：从学徒到高手》【PDF】下载

    <软件开发者路线图:从学徒到高手>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196346 图书简介 作为一名软件开发者,你在奋力 ...

  4. Web服务器、应用服务器、Web容器、反向代理服务器区别与联系

    作者: 帅虫哥 出处:www.cnblogs.com/vipyoumay/p/7455431.html(点击尾部阅读原文前往) 我们知道,不同肤色的人外貌差别很大,而双胞胎的辨识很难.有意思的是Web ...

  5. windos10安装mongodb并配置

    想了想还是把这个写上吧,毕竟网上的教程有不少坑的. 首先下载mongodb,如果你嫌官网慢,那么你可以去我的百度云下载 链接:http://pan.baidu.com/s/1pKEWTBX 密码:v3 ...

  6. UVALive 4490 Help Bubu

    题目大意:有n本书,高度值域为8,现可以把k本书拿出来再放进去,相邻的.高度相同的书算作一块,最小化块的个数.n=100. 强烈建议大家不要在做完区间DP后做别的DP题:区间DP是整体考虑,而一般DP ...

  7. HTML5 给图形绘制阴影(绘制五角星示例)

    几个属性 shadowOffsetX:阴影的横向位移量. shadowOffsetY:阴影的纵向位移量. shadowColor:阴影的颜色. shadowBlur:阴影的模糊范围. 属性说明 sha ...

  8. JAVA NIO学习三：NIO 的非阻塞式网络通信

    紧接着上一章,我们继续来研究NIO,上一章中我们讲了NIO 中最常见的操作即文件通道的操作,但实际上NIO的主要用途还是在于网络通信,那么这个时候就会涉及到选择器,这一章我们就会对其进行讲解操作. 一 ...

  9. Tomcat安装和目录简介

    要知道动态的网页必须要有服务器的支撑! 1.知名的java web服务器 Tomcat:Apache组织发布,免费开源的,轻量级 JBoss.WebLogic是商用的,价格较高,但相对于开源的更加稳定 ...

  10. Io 异常: The Network Adapter could not establish the connection

    新接触一个项目,导入源码,在本地启动的时候后台报了一个错误: Could not discover the dialect to use. java.sql.SQLException: Io 异常: ...