本人看了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. 自学Zabbix3.5.2-监控项item-types监控类型

    自学Zabbix3.5.2-监控项item-types监控类型 1. item types item types是由zabbix提供的各种类型的检查器,大致就是Zabbix agent, Simple ...

  2. div元素宽度不定的情况下如何居中显示

    最近由于工作的原因碰到一个问题,就是在一个弹窗宽度不定的情况下还能是该弹窗居中显示,思考许久未找到合适办法,于是在网上找到一些办法在此总结记录下来方便以后的学习. 方法一:兼容IE67 <div ...

  3. 10个最有用的 IntelliJ IDEA 插件

    IntelliJ IDEA鼓舞了许多Java开发人员编写插件,从J2EE到代码编辑工具再到游戏.现在,它拥有了一个强大的插件生态系统,超过1500可用的插件以及几乎每周都有新的插件出现.在这篇文章中, ...

  4. docker学习笔记（一）

    docker是一种容器技术,现在火的一塌糊涂,最近公司打算用docker统一开发.测试.预上线.上线环境,所以花了时间研究一下. docker是一种容器技术,之前是基于LXC容器,现在已经改成基于li ...

  5. Pycharm配置（二）

    1.主题 这部分教程主要介绍如何创建一个Python工程并使其具有Pycharm的代码风格.你将会看到Pycharm使你的源码变得非常简洁美观,带有合适的缩进.空格等等,因此Pycharm也是一款代码 ...

  6. C:宏定义的一些格式（怕忘记）

    现在还没怎么用到宏定义,但以后肯定会经常用的,写下这盘,以后忘记了可以温故.首先宏定义必须写在函数之外,其作用域从宏定义命令起到源程序结束,也就是说一但定义系统就会分配内存,想让它结束用“#undef ...

  7. 童话故事 --- CPU的贴身侍卫ITCM和ICache

    "叮铃铃- 叮铃铃-" "谁呀?"黛丝博士打开了家门,"哇,高飞,你怎么来了?" 高飞狗:"好久不见,想来看看你,还买了你最喜欢吃 ...

  8. bzoj 2727: [HNOI2012]双十字

    Description 在C 部落,双十字是非常重要的一个部落标志.所谓双十字,如下面两个例子,由两条水平的和一条竖直的"1"线段组成,要求满足以下几个限制: 我们可以找到 5 个 ...

  9. CentOS7.4 chrony时间同步服务器部署（替代NTPD）

    Chrony是一个开源的自由软件,它能保持系统时钟与时钟服务器(NTP)同步,让时间保持精确. 它由两个程序组成:chronyd和chronyc. chronyd是一个后台运行的守护进程,用于调整内核 ...

  10. vue基础学习（二）

    02-01  vue事件深入-传参.冒泡.默认事件 <div id="box"> <div @click="show2()"> < ...