使用vue+bootstrap简单实现购物车

<!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="../../vue.js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
   <div id="app" class="container">
    <table class="table table-hover table-bordered">
        <h3 class="text-center text-success">购物车</h3>
        <tr>
            <th>
                <input type="checkbox" @click="changeAll" v-model='allCheck'>
                全选
            </th>
            <th>商品名称</th>
            <th>商品单价</th>
            <th>商品数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        <tr v-for='(item,index) in goods' :key='item.id'>
            <td> <input type="checkbox" v-model='item.check' @click='changeOne(index)'></td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
                <button class="btn btn-warning" @click='sub(index)'>-</button>{{item.num}}
                <button class="btn btn-success" @click='add(index)'>+</button>
            </td>
            <td>{{item.price*item.num}}</td>
            <td>
                <button class="btn btn-primary"  @click='tel(index)'>删除</button>
            </td>
        </tr>
        <tr>
            <td>总价</td>
            <td colspan="5">{{total}}</td>
        </tr>
      </table>
   </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                allCheck:false,
                goods:[
                    {
                        id:1,
                        name:'手机',
                        price:3999,
                        num:1,
                        check:false
                    },
                    {
                        id:2,
                        name:'电脑',
                        price:5999,
                        num:1,
                        check:false
                    },
                    {
                        id:3,
                        name:'平板',
                        price:1999,
                        num:1,
                        check:false
                    },
                ]
            },
            methods:{
                // 减
                sub(index){
                    if(this.goods[index].num>0){
                        this.goods[index].num--;
                    }
                },
                // 加
                add(index){
                    // 把上限设置为5
                    // 数组中第几项的num
                    if(this.goods[index].num<5){
                        this.goods[index].num++;
                    }
                },
                // 删除
                tel(index){
                    this.goods.splice(index,1)
                },
                // 全选
                changeAll(){
                    // allCheck:最终的状态
                    this.allCheck=!this.allCheck
                    // console.log(this.allCheck);
                    this.goods.forEach((item)=>{
                        item.check = this.allCheck
                    })
                    
                },
                // 选中某一个
                changeOne(index){
                    this.goods[index].check = !this.goods[index].check
                    this.allCheck = this.goods.every(item=>{
                        console.log(item.check);
                      return item.check
                  })
                },
            },
            // 计算属性
            computed:{
                total(){
                    var sum =0;
                    this.goods.forEach(item=>{
                        if(item.check){
                            sum+=item.price*item.num
                        }
                    })
                    return sum
                }
            }
        })
    </script>
</body>
</html>
posted @ 2020-10-13 08:43  一首老歌  阅读(258)  评论(0)    收藏  举报