Vue組件簡易模擬實現購物車

Posted on by

本文實例為大傢分享瞭Vue組件模擬實現購物車的具體代碼，供大傢參考，具體內容如下

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script src="./lib/vue-2.4.0.js"></script>
 <style>
  #app{
   width:600px;
  }

  #myTable{
   width:500px;
   border-collapse:collapse;
  }

  td, th{
   text-align: center;
   font-size:20px;
   border:2px solid black;
  }

  td{
   height: 40px;
  }

  input{
   width: 30px;
   text-align: center   
  }

 </style>
</head>
<body>

 <div id="app">
  <my-cart></my-cart>
 </div>

 <script>
  var MyCommmodity = {
   props: ["list"],
   template:`
    <div>
     <button @click="baicai">白菜</button>
     <button @click="qingcai">青菜</button>
     <button @click="luobo">蘿卜</button> 
    </div>
   `,
   methods: {
    baicai: function(){
     var cai = {};
     cai.id = 4;
     cai.name = "白菜"
     cai.price = 3;
     cai.num = 1;
     this.list.push(cai)
    },
    qingcai: function(){
     var cai = {};
     cai.id = 5;
     cai.name = "青菜"
     cai.price = 6;
     cai.num = 1;
     this.list.push(cai)
    },
    luobo: function(){
     var cai = {};
     cai.id = 6;
     cai.name = "蘿卜"
     cai.price = 8;
     cai.num = 1;
     this.list.push(cai)
    }
   }
  }

  var MyTable = {
   props: ["list", "flag"],
   template:`
    <table id="myTable">
    <tr>
     <th>編號</th>
     <th>名稱</th>
     <th>單價</th>
     <th>數量</th>
     <th>操作</th>
    </tr>
    <tr :key="item.id" v-for="item in list"> 
     <td>{{item.id}}</td>
     <td>{{item.name}}</td>
     <td>{{item.price}}</td>
     <td>
      <button :disabled="flag" @click="sub(item.id)">-</button>
      <input type="text" :value="item.num" @blur="changeNum(item.id,$event)">
      <button @click="add(item.id)">+</button>
     </td>
     <td>
      <button @click="del(item.id)">刪除</button>
     </td>
    </tr>
   </table>
   `,
   methods: {
    changeNum: function(id, event){
     this.$emit("change-num",{
      id: id,
      type: "change",
      num: event.target.value
     });
    },
    sub: function(id){
     this.$emit("change-num",{
      id: id,
      type: "sub"
     })
    },
    add: function(id){
     this.$emit("change-num",{
      id: id,
      type: "add"
     })
    },    
    del: function(id){
     // alert(id);
     this.$emit("del-cart",id)
    }
   }
  }

  var MyPrice = {
   props: ["list"],
   template:`
    <div>
     <span>結算：</span>
     <span>{{total}}</span>     
    </div>
   `,
   computed: {
    total: function(){
     var t = 0;
     this.list.forEach(item => {
      t += item.price * item.num;
     });
     return t;
    }
   }
  }

  Vue.component('my-cart', {
   data () {
    return {
     flag:false,
     list:[{
      id: 1,
      name: "豬",
      price: "10",
      num:1,
     },
     {
      id: 2,
      name: "牛",
      price: "11",
      num:1,
     },
     {
      id: 3,
      name: "雞",
      price: "13",
      num:1,
     }]
    }
   },
   template:`
    <div> 
     <my-commmodity :list="list"></my-commmodity> 
     <my-table :list="list" :flag="flag" @change-num="changeNum($event)" @del-cart="delCart($event)"></my-table>
     <my-price :list="list"></my-price>
        
    </div>
   `,
   components:{ 
    'my-table':MyTable,
    'my-price':MyPrice,
    'my-commmodity':MyCommmodity,
   },
   methods:{
    changeNum: function(val){
     if(val.type ==="change"){
      this.list.some(item=>{
       if(item.id == val.id){
        item.num = val.num;
        return true;
       }
      });      
     }else if(val.type ==="sub"){
      this.list.some(item=>{
       if(item.id == val.id && item.num >0){
        item.num -= 1;
        return true;
       }
      }); 
     }else if(val.type ==="add"){
      this.list.some(item=>{
       if(item.id == val.id){
        item.num += 1;
        return true;
       }
      }); 
     }

    },
    delCart: function(id){
     var index = this.list.findIndex(item=>{
      return item.id == id;
     })
     this.list.splice(index,1)
    }
   }
  })


 var vm = new Vue({
  el: '#app',
  data:{
  }
 })
 </script>
</body>
</html>

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：