本人看了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. 深入理解计算机系统_3e 第五章家庭作业 CS:APP3e chapter 5 homework

    5.13 A. B. 由浮点数加法的延迟,CPE的下界应该是3. C. 由整数加法的延迟,CPE的下界应该是1. D. 由A中的数据流图,虽然浮点数乘法需要5个周期,但是它没有"数据依赖&q ...

  2. 企业级PPTP服务器

    第一个里程碑:检查系统是否支持ppp [root@m01 ~]# cat /dev/ppp cat: /dev/ppp: No such device or address 如果出现以上提示则说明pp ...

  3. Asp.Net Web API（四）

    HttpResponseException-----HTTP响应异常 如果Web API控制器抛出一个未捕捉的异常,会发生什么呢?在默认情况下,大多数异常都会转换为一个带有状态码500的内部服务器错误 ...

  4. VMware安装Linux，系统分区。

    系统分区: 主分区<=4 扩展分区<=1 主分区+扩展分区<=4 扩展分区不能直接使用,必须再分成若干逻辑分区才能读写数据. 逻辑分区编号从5开始,1-4给主分区和扩展分区使用的,不 ...

  5. JMeter循环控制器循环次数使用变量控制注意事项

    1.进入循环控制器之前变量要有值: 2.BeanShell处理文件,读取行数,赋值给变量,要有相应的Sampler,不然脚本不会运行. 对于单个线程来说,假如设置了循环2次,线程启动后,运行结束,此时 ...

  6. springboot swagger-ui结合

    随着移动互联的发展,前后端的分离已经是趋势.前后端已不是传统部门的划分,而是它们各有一套的生态系统,包括不同的开发语言.不同的开发流程.构建方式.测试流程等.做前端的不需要会maven作为构建工具,后 ...

  7. grep 、find 、tree 新发现

    [root@localhost tftpboot]# ip address | grep -A 1 " eno16777736"2: eno16777736: <BROADC ...

  8. ecsmart的开发经历

    ecsmart是ecshop的产品之一,是2015年发布的一套系统.关于它的介绍请到官网去了解,也可以百度 “商之翼” “ecsmart” 1.ecsmart分别在pc.mobile.app三个方面都 ...

  9. BOOTPROTO=[none|static|bootp|dhcp]（引导时不使用协议|静态分配|BOOTP协议|DHCP协议）

     BOOTPROTO=[none|static|bootp|dhcp](引导时不使用协议|静态分配|BOOTP协议|DHCP协议) 

  10. axios配合vue+webpack使用

    1.安装引用: cnpm install axios --save-dev 2.在组件中引入: import axios from 'axios'; 3.使用示例: 执行GET请求: // 为给定 I ...