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 上下滚动广告
Jun 17 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
js编写简单的计时器功能
Jul 15 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
vue.js实现回到顶部动画效果
Jul 31 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
PHP中动态HTML的输出技术
2006/10/09 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
php格式化时间戳
2016/12/17 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
javascript this用法小结
2008/12/19 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Python Gitlab Api 使用方法
2019/08/28 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
python Tensor和Array对比分析
2020/01/08 Python
python range实例用法分享
2020/02/06 Python
锐步英国官网:Reebok英国
2019/11/29 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书