Vue实现购物车功能


Posted in Javascript onApril 27, 2017

效果图:

Vue实现购物车功能

代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" />
</head>
<body>

  <div id="app" class="container">
    <table class="table">
      <thead>
        <tr>
          <th>产品编号</th>
          <th>产品名字</th>
          <th>购买数量</th>
          <th>产品单价</th>
          <th>产品总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item , index) in message">
          <td @click="jia(index)">{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>
            <button type="button" class="btn tn-primary" @click="subtract(index)">-</button>
            <input type="text" v-model="item.quantity">
            <button type="button" class="btn tn-primary" @click="add(index)">+</button>
          </td>
          <td>{{item.price | filtermoney}}</td>
          <!--<td>{{arr[index].one}}</td>-->
          <td>{{item.price*item.quantity | filtermoney}}</td>
          <td>
            <button type="button" class="btn btn-danger" @click="remove(index)">移除</button>
          </td>
        </tr>
        <tr>
          <td>总购买价  
          </td>
          <td>
            {{animatenum | filtermoney}}
          </td>
          <td>总购买数量
          </td>
          <td>

          </td>
          <td colspan="2">
            <button type="button" class="btn btn-danger" @click="empty()">清空购物车</button>
          </td>
        </tr>
      </tbody>
    </table>

    <p v-if="message.length===0">您的购物车为空</p>
  </div>
  <script src="https://unpkg.com/tween.js@16.3.4"></script>
  <script src="https://cdn.bootcss.com/vue/2.2.3/vue.min.js"></script>
  <script>
   var vm=new Vue({
   el:"#app",
   data:{
    totalPrice:0,
    animatenum:0,
    message:[
    {
        id: 007,
        name: 'iphone5s',
        quantity: 3,
        price: 4000
     },{
        id: 1340,
        name: 'iphone5',
        quantity: 9,
        price: 3000
     },{
        id: 7758,
        name: 'imac',
        quantity: 4,
        price: 7000
     },{
        id: 2017,
        name: 'ipad',
        quantity: 5,
        price: 6000
      }
    ]
   },
   watch:{
    toComput2:function(newValue,oldValue){
    this.tween(newValue,oldValue);
    }
   },
   computed:{
    //计算总金额
    toComput2:function(){
    var vm=this;
    //每次进来要重置总金额
    vm.totalPrice=0;
    this.message.forEach(function(mess){
     vm.totalPrice+=parseInt(mess.price*mess.quantity);
    })
    return this.totalPrice;
    }
   },
   filters:{
    filtermoney:function(value){
    return '¥'+value ;
    }
   },
   mounted:function(){ 
    this.tween('97000','0');
   },
   methods:{
    //计算总数的方法为什么写在methods里面就不行?
    toComput:function(){
    var vm=this;
    vm.message.forEach(function(mess){
     vm.totalPrice+=parseInt(mess.price*mess.quantity);
    })
   return vm.totalPrice;
    },
    add:function(index){
    var vm=this;
    vm.message[index].quantity++;
    },
    subtract:function(index){
    var vm=this;
    vm.message[index].quantity--;
    if(vm.message[index].quantity<=0){
     if (confirm("你确定移除该商品?")) { 
        vm.message.splice(index,1)
      } 
    }

    },
    remove:function(index){
    var vm=this;
    if (confirm("你确定移除该商品?")) { 
        vm.message.splice(index,1)
      } 
    },
    empty:function(){
    var vm=this;
    vm.message.splice(0,vm.message.length);
    },
    jia:function(index){
    var vm=this;
    vm.arr[index].one++;
    },
    tween:function(newValue,oldValue){
   var vm=this;
   var twen=new TWEEN.Tween({animatenum:oldValue});
   function animate() {
     requestAnimationFrame(animate);  
     TWEEN.update(); 
   };
   twen.to({animatenum:newValue},750);
   twen.onUpdate(function(){
   //toFixed();保留几位小数
   vm.animatenum = this.animatenum.toFixed();
   })
   twen.start();
   animate();
  }
   }
   });

  </script> 
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 #Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 #Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 #Javascript
微信小程序 wx:for的使用实例详解
Apr 27 #Javascript
微信小程序 动态传参实例详解
Apr 27 #Javascript
微信小程序 本地数据读取实例
Apr 27 #Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 #Javascript
You might like
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
简单JS代码压缩器
2006/10/12 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python简单文本处理的方法
2015/07/10 Python
Python yield 使用方法浅析
2017/05/20 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
python同步两个文件夹下的内容
2019/08/29 Python
python程序需要编译吗
2020/06/19 Python
Python实现GIF图倒放
2020/07/16 Python
python判断元素是否存在的实例方法
2020/09/24 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
离婚协议书范文2014
2014/10/16 职场文书
2014年保洁工作总结
2014/11/24 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB