Vue.js實現簡單的購物車

首先將vue全局引入 爲了美觀咱們將bootstrap也引入

<script src="vue.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

首先實現一個商品列表頁面

<div id="app">
<ul class="list-group">
    <li class="list-group-item" v-for="good in goods">
        {{good.id}}/{{good.name}}售價:{{good.price}}
        <button type="button" class="btn btn-default btn-xs" v-on:click="addTocar(good)">加入購物車</button>
    </li>
</ul>
</div>

使用vue.js 的v-for語法遍歷列表

var vm = new Vue({
        //初始化綁定id
        el:"#app",
        data:{
          goods:[
              {id:1,name:'炸雞',price:150,num:0},
              {id:2,name:'炸豬',price:1500,num:0},
              {id:3,name:'炸狗',price:1501,num:0},
              {id:6,name:'炸機',price:1504,num:0},

              ]
        },
        //當頁面加載的時候機會執行created方法
        created:function () {
        },methods: {
            addTocar:function (good) {
                //首先須要判斷該商品的id 是否存在,若是存在的話不增長列數
                var arr = '';
                car.list.forEach(function (item,id) {
                    arr  += Number(item.id);
                })
                //若是檢索的字段沒有出現返回-1
                if(arr.indexOf(good.id) > -1){
                    //獲取列表中該id的位置
                    var temp = '';
                    
                    for(var i = 0; i< car.list.length;i++){
                        if(good.name == car.list[i].name){
                            temp = i;
                        }
                    }
                    var temp_price = good.price;
                   //此處不適用price,由於數據是雙向綁定的 car.list[temp].num += 1;
                }else{
                    //若是數據不存在列表中直接添加
                    car.list.push(good);
                }
            }
        }
    });

增長一件商品
<div id="admin">
    名稱:<input type="text" class="form-control" v-model="good.name">
    售價:<input type="text" class="form-control" v-model="good.price">
    <button type="button" class="btn btn-default btn-xs" v-on:click="addToGoods(good)">添加</button>
</div>
    var admin = new Vue({
       el:"#admin",
        data:{
          good:[{id:0,name:'',price:0,num:0}]
        },
        methods:{
           addToGoods:function (good) {
               this.good.id = vm.goods.length + 1
               vm.goods.push(good);
             //增長完商品後須要將其還原成對象形式
               this.good = {name: '', price: 0}
           }
        }
    });

<div id="car">
    <h3>個人購物車  購買的總商品價格{{sum}}</h3>
    <ul class="list-group">
        <li class="list-group-item" v-for="res in list">
            {{res.id}}/{{res.name}}售價:{{res.price}} {{res.num}}
            <button type="button" class="btn btn-default btn-xs" v-on:click="del(res)">刪除</button>
        </li>
    </ul>
</div>

實現購物車
  var admin = new Vue({
       el:"#admin",
        data:{
          good:[{id:0,name:'',price:0,num:0}]
        },
        methods:{
           addToGoods:function (good) {
               this.good.id = vm.goods.length + 1
               this.good.num = 0
               vm.goods.push(good);
               this.good = {id:0,name: '', price: 0,num:0}
           }
        }
    });