本人看了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. IntelliJ IDEA 热部署插件 JRebel 安装激活及使用

    JRebel对个人用户免费使用,但是要使用Facebook账号把信息完整填写之后才能获取Lisense,登陆Facebook官网二种方案:①修改本地hosts文件:②使用VPNFQ 以下是二种方案的解 ...

  2. Android查缺补漏--ContentProvider的使用

    ContentProvider (内容提供者)是一种共享型组件,可以为系统内应用于与应用之间提供访问接口. ContentProvide要想正常工作需要三个关键点: ContentProvider:对 ...

  3. 3.更改ssh服务远程登录的配置

  4. UIImage类方法总结及UIImage生成方法对比

    http://mp.weixin.qq.com/s/A900w0Y5pGjuaB4j9Os9ww1.UIImage 生成方法的对比 Apple官方的文档为生成一个UIImage对象提供了两种方法: 1 ...

  5. c#访问oracle数据库

    想在c#中访问oracle数据库,毕竟是开发,想要轻量级访问oracle,客户机上无需安装oracle环境就能正常运行程序. 在网上找了相关资料,只需要引用一个dll即可实现. 访问代码(需引用dll ...

  6. Django2.0中文文档

    title: Django2.0中文文档 tags: Python,Django,入沐三分 grammar_cjkRuby: true --- Django2.0版本已经发布了,我们先来看一个图片 从 ...

  7. 顶点/片元 shader 总结

    Cg顶点程序必须在结构中传递顶点数据.几种常用的顶点结构定义在文件UnityCG.cginc中,有如下三种结构体: 1.appdata_base: 包含顶点位置,法线和一个纹理坐标.2.appdata ...

  8. 移动端IOS第三方输入法遮挡底部Input及android键盘回落留白问题

    var interval; //消息框获取焦点 $('#J_text').focus(function(){ interval = setInterval(function() { scrollToE ...

  9. JVM 运行时的内存分配

    首先我们必须要知道的是 Java 是跨平台的.而它之所以跨平台就是因为 JVM 不是跨平台的.JVM 建立了 Java 程序和操作系统之间的桥梁,JVM 是用 C 语言编写,而 C 语言不具备跨平台的 ...

  10. [编织消息框架][JAVA核心技术]动态代理应用6-设计生成类

    上篇介绍到rpc可以使用接口与实现类来约束书写 根据接口用javassist生成两个代理类 1.sendProxy 发送处理,调用方式可以是远程/本地 2.receiveProxy 接收处理,内部调用 ...