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 相关文章推荐
JavaScript的继承的封装介绍
Oct 15 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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
PHP中的正规表达式(一)
2006/10/09 PHP
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
python文件操作相关知识点总结整理
2016/02/22 Python
Python学习入门之区块链详解
2017/07/25 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
python实现单向链表详解
2018/02/08 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
如何基于python测量代码运行时间
2019/12/25 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
什么是URL
2015/12/13 面试题
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
数学教育专业求职信
2014/07/22 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
成绩单评语
2015/01/04 职场文书
2015学校年度工作总结
2015/05/11 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
高一作文之暖冬
2019/11/09 职场文书