Vue實現(xiàn)購物車功能

更新時間：2017年04月27日 11:09:43 作者：1178291141

本篇文章主要分享了Vue實現(xiàn)購物車功能的實例代碼。具有很好的參考價值。下面跟著小編一起來看下吧

效果圖：

代碼如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet"  rel="external nofollow" />
</head>
<body>

  <div id="app" class="container">
    <table class="table">
      <thead>
        <tr>
          <th>產品編號</th>
          <th>產品名字</th>
          <th>購買數(shù)量</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>總購買數(shù)量
          </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:{
    //計算總數(shù)的方法為什么寫在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();保留幾位小數(shù)
   vm.animatenum = this.animatenum.toFixed();
   })
   twen.start();
   animate();
  }
   }
   });

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

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家!

您可能感興趣的文章: