购物车 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 调用bootstrap -->
    <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">
        <h3 class="text-center text-success">购物车</h3>
        <table class="table table-hover table-bordered">
            <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 list' :key='item.id'>
                <td><input type="checkbox" v-model='item.check'></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='del(index)'>删除</button>
                </td>
            </tr>
            <tr>
                <td>总价</td>
                <td colspan="5">{{numAll}} </td>
            </tr>
        </table>


    </div>
    <script src="./代码/vue.js"></script>
    <script>
        let vn = new Vue({
            el: '#app',
            data: {
                allCheck:false,
                list:[
                {
                    id:1,
                    name:'手机',
                    price:1999,
                    num:1,
                    check:false,
                },
                {
                    id:2,
                    name:'电脑',
                    price:3999,
                    num:1,
                    check:true,
                },
                {
                    id:3,
                    name:'平板',
                    price:999,
                    num:1,
                    check:false,
                }
                ]
            },
            methods: {
                // 减小
                sub(index){
                    if(this.list[index].num>1){
                        this.list[index].num--;
                    }
                },
                // 增加
                add(index){
                    if(this.list[index].num<5){
                        this.list[index].num++;
                    }
                },
                // 删除
                del(index){
                    this.list.splice(index,1)
                },
                // 全选
                changeAll(){
                    this.allCheck=!this.allCheck;
                    this.list.forEach(item=>{
                        item.check=this.allCheck;
                    })
                },
                // 选中其中一个
                change(index){
                    this.list[index].check=!this.list[index].check;
                    this.allCheck=this.list.every(item=>{
                        return item.check;
                    })
                }
            },
            // 计算属性
            computed:{
                // 判断总计
                numAll(){
                    var sum=0;
                    this.list.forEach(item => {
                        if(item.check){
                            sum+=item.price*item.num;
                        }
                    });
                    return sum;
                }
            }
        })
    </script>
</body>

</html>

 

posted @ 2020-10-12 20:32  覅#  阅读(60)  评论(0)    收藏  举报