使用vue实现购物车功能

页面效果图：

html代码：

　　　　　　<div class="shop-car" id='car'>
            <div class="count-custom">
                全部商品 {{count}}
            </div>
            <table border="1" cellspacing="0" cellpadding="10">
                <tr>
                    <th><input type="checkbox" name="" id="checkAll" value="" @click="checkAll"/>全部</th>
                    <th>商品</th>
                    <th>单价（元）</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in goods" :key="item.id">
                    <td><input type="checkbox" name=""  class="checked"id="" value=""  @click="checked()"/></td>
                    <td>
                        <div class="info">
                            <div class="img-left">
                                <img :src="item.img" >
                            </div>
                            <div class="info-right">
                                <p class="name">{{item.name}}</p>
                                <p class="cun">{{item.cicun}}</p>
                                <p class="memery">{{item.memery}}</p>
                            </div>
                        </div>
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <div class="steper">
                            <input type="button" class="opts" id="" value="-" @click="options(-1,item.id)" />
                            <span>{{item.num}}</span>
                            <input type="button" name="" @click="options(+1,item.id)" value="+" />
                        </div>
                    </td>
                    <td><a href="#" @click="del(item.id)">删除</a></td>
                </tr>
                <tr>
                    <td colspan="5" style="text-align: center;">统计:{{countPrice}}元</td>
                </tr>
            </table>
        </div>

css代码:

　　　　　　　*{
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;
            }
            
            .shop-car{
                margin-left: 20px;
                margin-top: 20px1;
            }
            table{
                /* text-align: center; */
                /* align-content: center; */
            }
            tr>td:first-child{
                text-align: center;
            }
            .info{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            .info-right{
                height: 80px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .img-left>img{
                width: 100px;
            }
            .steper{
                
                margin: 0px 20px;
            }
            .steper>input[type="button"]{
                width:30px;
            }
            .steper>span{
                display: inline-block;
                width: 20px;
                text-align: center;
            }

js代码:

　　　　　　　　var vm=new Vue({
                el:"#car",
                data:{
                    count:0,
                    countPrice:0,
                    goods:[
                        {id:0,name:"oppo 麦芒5 全网通 4GB+64GB版 墨黑 移动联通电信4G手机 双卡双待",cicun:"4.9英寸",memery:"4GB+64GB",price:"1339.00",img:"./images/phone01.jpg",num:1},
                        {id:1,name:"vivo 麦芒5 全网通 4GB+64GB版 墨黑 移动联通电信4G手机 双卡双待",cicun:"4.9英寸",memery:"4GB+64GB",price:"130.00",img:"./images/phone02.jpg",num:1},
                        {id:2,name:"华为 麦芒5 全网通 4GB+64GB版 墨黑 移动联通电信4G手机 双卡双待",cicun:"4.9英寸",memery:"4GB+64GB",price:"19.00",img:"./images/phone03.jpg",num:1},
                    ]
                },
                methods:{
　　　　　　　　　　//全选
                    checkAll(){
                        var checkAll=document.getElementById("checkAll");
                        var checkeds=document.getElementsByClassName("checked")
                        if(checkAll.checked==true){
                            for(var i=0;i<checkeds.length;i++){
                                checkeds[i].checked=true
                            }
                        }
                        this.countPrices()
                    },
                    checked(status){
                        var checkAll=document.getElementById("checkAll");      
                        var checkeds=document.getElementsByClassName("checked")
                        console.log(checkeds)
                        for (var i=0;i<checkeds.length;i++){
                            if(checkeds[i].checked==false){
                                checkAll.checked=false
                                
                                return false
                            }
                            checkAll.checked=true;
                        }
                        this.countPrices()
                    },
                    options(value,id){
                        
                        let goods=this.goods;
                        var newGoods=goods.map((item,index,arr)=>{
                            if(item.id==id){
                                item.num=item.num+value;
                                this.butonStatus()
                            }
                            return item;
                        })
                        this.goods=newGoods
                        this.countPrices()
                    },
                    // 计算价格
                    countPrices(){
                        var countPrice=0;
                        console.log(this.goods)
                        var goods=this.goods
                        var checkAll=document.getElementById("checkAll");
                        var checkeds=document.getElementsByClassName("checked")
                        console.log(checkeds)
                        for (var i=0;i<checkeds.length;i++){
                            if(checkeds[i].checked==true){
                                countPrice+=goods[i].price*goods[i].num
                            }
                        }
                        this.countPrice=countPrice
                        console.log(countPrice)
                    },
                    // 删除
                    del(id){
                        console.log(id)
                        var goods=this.goods;
                        var newGoods=goods.map((item,index,arr)=>{
                            if(item.id==id){
                                return arr.splice(index,1)
                            }
                        })
                    },
                    butonStatus(){
                        var opts=document.getElementsByClassName("opts")
                        var goods=this.goods;
                        var newGoods=goods.map((item,index)=>{
                            if(item.num<2){
                                console.log(index)
                                opts[index].disabled=true
                            }else{
                                opts[index].disabled=false
                            }
                        })
                    }
                },
                
                
                mounted(){
                    this.count=this.goods.length;//获取添加购物车商品的数量
                    this.butonStatus(); //这里判断 - 号按钮是否可用                   
                }
            })