Vue實現購物車效果

fizz141242發表於2020-10-12
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>
    <!-- 呼叫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>

相關文章