JavaScript
搜索
分类

Vue实现购物车功能

作者：1178291141 时间：2024-04-30 10:26:21　

效果图：

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>

来源：http://www.qdfuns.com/notes/31876/829e0144532dbd08107aaa5dd48ae336.html

标签：vue,购物车
0
投稿

猜你喜欢

  • 浅谈golang并发操作变量安全的问题

    2024-04-26 17:22:23

  • python双向链表实例详解

    2023-10-28 08:25:09

  • vue中实现可编辑table及其中加入下拉选项

    2024-04-10 10:24:51

  • Windows下安装MySQL 5.7.17压缩版中遇到的坑

    2024-01-21 17:06:54

  • 如何用Python进行时间序列分解和预测

    2022-06-20 14:39:42

  • 如何将pytorch模型部署到安卓上的方法示例

    2023-03-15 15:12:12

  • python实现AI聊天机器人详解流程

    2022-12-11 23:57:37

  • Python接口自动化浅析数据驱动原理

    2022-02-22 21:52:01

  • Python使用matplotlib的pie函数绘制饼状图功能示例

    2022-09-27 23:58:58

  • 动态载入树 (ASP+数据库)

    2010-05-27 12:20:00

  • python 如何将字典写为json文件

    2021-07-22 18:39:39

  • django和vue互传图片并进行处理和展示

    2021-04-24 20:39:16

  • python中 ? : 三元表达式的使用介绍

    2022-07-30 00:29:44

  • 利用tkinter改变下拉列表(Combobox)的选项值

    2023-07-20 03:10:37

  • uniapp实现微信H5扫码功能的完整步骤

    2024-04-10 16:21:04

  • 利用Python绘制创意中秋节月饼

    2023-02-19 17:52:41

  • sqlserver2005自动创建数据表和自动添加某个字段索引

    2024-01-26 19:37:17

  • X/HTML5 v.s. XHTML2（II）

    2008-06-18 13:19:00

  • asp如何编写翻页函数？

    2009-11-07 18:46:00

  • python如何删除文件中重复的字段

    2021-09-19 15:43:12
    • asp之家 网络编程 m.aspxhome.com