代码下载地址：https://github.com/MengFangui/VueShoppingCart

1、index.html

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>购物车示例</title>
  6.     <link rel="stylesheet" type="text/css" href="css/style.css"/>
  7. </head>
  8. <body>
  9.     <div id="app" v-cloak>
  10.         <template v-if="list.length">
  11.             <table>
  12.                 <thead>
  13.                     <tr>
  14.                         <th></th>
  15.                         <th>商品名称</th>
  16.                         <th>商品单价</th>
  17.                         <th>购买数量</th>
  18.                         <th>操作</th>
  19.                     </tr>
  20.                 </thead>
  21.                 <tbody>
  22.                     <!--注意v-for有可选参数键名和索引(value,key,index)-->
  23.                     <tr v-for='(item,index) in list'>
  24.                         <td>
  25.                             {{index+1}}
  26.                         </td>
  27.                         <td>
  28.                             {{item.name}}
  29.                         </td>
  30.                         <td>
  31.                             {{item.price}}
  32.                         </td>
  33.                         <td>
  34.                             <button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
  35.                             {{item.count}}
  36.                             <button @click="handleAdd(index)">+</button>
  37.                         </td>
  38.                         <td>
  39.                             <button @click="handleRemove(index)">移除</button>
  40.                         </td>
  41.                     </tr>
  42.                 </tbody>
  43.             </table>
  44.             <div>总价：¥{{totalPrice}}</div>
  45.         </template>
  46.         <div v-else>
  47.             购物车为空
  48.         </div>
  49.     </div>
  50.     <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
  51.     <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
  52. </body>
  53. </html>

2、index.js

  1. var app = new Vue({
  2.     el: '#app',
  3.     data: {
  4.         list: [{
  5.                 id: 1,
  6.                 name: 'iphone 7',
  7.                 price: 6188,
  8.                 count: 1
  9.             },
  10.             {
  11.                 id: 2,
  12.                 name: 'iphone 8',
  13.                 price: 7188,
  14.                 count: 1
  15.             },
  16.             {
  17.                 id: 3,
  18.                 name: 'iphone X',
  19.                 price: 8188,
  20.                 count: 1
  21.             },
  22.         ]
  23.     },
  24.     methods: {
  25.         handleReduce: function(index) {
  26.             if(this.list[index].count === 1) return;
  27.             this.list[index].count--;
  28.         },
  29.         handleAdd: function(index) {
  30.             this.list[index].count++;
  31.         },
  32.         handleRemove: function(index) {
  33.             this.list.splice(index, 1);
  34.         }
  35.     },
  36.     computed: {
  37.         totalPrice: function() {
  38.             var total = 0;
  39.             for(var i = 0, len = this.list.length; i < len; i++) {
  40.                 total += this.list[i].price * this.list[i].count;
  41.             }
  42.             //每隔三位加一个逗号
  43.             return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
  44.         }
  45.     }
  46. })

3、style.css

  1. [v-cloak]{
  2.     display: none;
  3. }
  4. table{
  5.     border: 1px solid #e9e9e9;
  6.     border-collapse: collapse;
  7.     border-spacing:;
  8.     empty-cells: show;
  9. }
  10. th,td{
  11.     padding: 8px 16px;
  12.     border: 1px solid #e9e9e9;
  13.     text-align: left;
  14. }
  15. th{
  16.     background: #f7f7f7;
  17.     color: #5c6b77;
  18.     font-weight:;
  19.     white-space: nowrap;
  20. }

4、效果

VUE购物车示例的更多相关文章

  1. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  2. Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法

    一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...

  3. python 之CORS,VUE+rest_framework示例

    一.跨域     浏览器的同源策略                 ----对ajax请求进行阻拦                 ----对href属性读不阻拦        xhr=new XML ...

  4. Vue购物车实例

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

  5. vue 购物车练习

    本人看了vue官网上的教程后,感觉对vue的依稀有点了解,决定动手练习个小功能项目,就找了购物车本项目.原文链接:http://blog.csdn.net/take_dream_as_horse/ar ...

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

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

  7. Vue.js示例：GitHub提交（watch数据，created钩子，filters过滤）； 网格组件(功能：1.检索，2排序)；

    GitHub提交 codePen:   https://codepen.io/chentianwei411/pen/wEVPZo 注意:频繁看案例,可能会被限制. 重点: 表单输入绑定, 单选按钮的使 ...

  8. vue购物车功能源码

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

  9. Vue购物车

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

随机推荐

  1. javascrip 求最大公因数（分解质数法）发生的问题

    //这是求一个数的质因数,例如:12=2*2*3 其中2,3都是质数.function primeArray(n, array) { array = new Array(); for (var i = ...

  2. 【BZOJ 4513】【SDOI 2016】储能表

    http://www.lydsy.com/JudgeOnline/problem.php?id=4513 设\(f(i,0/1,0/1,0/1)\)和\(g(i,0/1,0/1,0/1)\)分别表示d ...

  3. JZYZOJ 1360 [usaco2011feb]人品问题 DP 树状数组 离散化

    http://172.20.6.3/Problem_Show.asp?id=1360   好想好写   代码 #include<iostream> #include<cstdio&g ...

  4. BZOJ 1098 [POI2007]办公楼biu（反向图bfs+并查集优化）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1098 [题目大意] 现在有一张图,要求将这张图的点划分为尽量多的分组,对于不同分组的两 ...

  5. lightoj 1052 - String Growth & uva 12045 - Fun with Strings 矩阵

    思路:很容易发现规律,数列和Fib数列一样的. 记开始的时候啊a的个数为Y,b的个数为X.建立矩阵. 代码如下: #include<iostream> #include<cstdio ...

  6. python的dict和set

    dict dict是dictionary的缩写,python内置了字典,在其他语言中也称为map,使用键值对储存,具有极快的查找速度. 如果是只用list来实现,就需要两个list,先在第一个list ...

  7. [转]Java程序员从笨鸟到菜鸟之（八十三）细谈Spring（十二）OpenSessionInView详解及用法

    首先我们来看一下什么是OpenSessionInView?    在hibernate中使用load方法时,并未把数据真正获取时就关闭了session,当我们真正想获取数据时会迫使load加载数据,而 ...

  8. Android Json的使用（2） 使用Jackson解析和生成json

    使用Jackson的三种方式 数据绑定模式:使用最方便 流模式:性能最佳 树模式:最灵活 以最常用的数据绑定模式为例 Json数据如下 { "name" : { "fir ...

  9. 【mybatis】mybatis中 返回map集合

    关于mybatis返回map集合的操作: 1.mapper.xml中写一个查询返回map的sql <select id="findMap" parameterType=&qu ...

  10. 【chrome】在做项目使用chrome调试的时候，调整Console的位置

    在新的电脑上安装了谷歌浏览器 ,然后在调试系统的时候,发现console这个控制台,模拟调试js的位置无法显示到source以下, 解决问题: 怎么样让console控制台显示到sources下,在查 ...