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 在网页中的运用(asp.net)
Nov 23 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
uni-app如何实现增量更新功能
Jan 03 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
php后退一页表单内容保存实现方法
2012/06/17 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
css配合jquery美化 select
2013/11/29 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
JavaScript实现拖拽功能
2020/02/11 Javascript
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
python监控文件或目录变化
2016/06/07 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
销售业务员岗位职责
2014/01/29 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
人事部经理岗位职责
2014/03/07 职场文书
节能减排倡议书
2014/04/15 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
店面出租协议书范本
2014/11/28 职场文书
初一语文教学反思
2016/03/03 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python