Vue實現購物車計算總價功能

<div id="app">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">購物車</h3>
            </div>
            <div class="panel-body">

                <div class="checkbox">
                    <label>
                        <input type="checkbox" v-model="checkAll">
                        全選
                    </label>
                </div>

                <ul class="list-group">
                    <li class="list-group-item" v-for="(item) in list" :key="item.id">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" v-model="item.checked">
                                {{item.name}}--{{item.price}}*{{item.quantity}}
                                <button type="button" @click="item.quantity>1?item.quantity-=1:1"
                                    class="btn btn-success">-</button>
                                <button type="button" @click="item.quantity+=1" class="btn btn-success">+</button>
                            </label>
                        </div>
                    </li>
                </ul>
                <p>總價：{{sumPrice}}</p>
            </div>
        </div>
</div>

<script src="./libs/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: [
                    {
                        id: 1,
                        name: "小米10",
                        price: 3999,
                        checked: false,
                        quantity: 1

                    },
                    {
                        id: 2,
                        name: "榮耀30",
                        price: 2999,
                        checked: false,
                        quantity: 1

                    },
                    {
                        id: 3,
                        name: "魅族17",
                        price: 3699,
                        checked: false,
                        quantity: 1

                    },
                    {
                        id: 4,
                        name: "蘋果11",
                        price: 5499,
                        checked: false,
                        quantity: 1

                    }
                ],
            },
            // computed計算屬性，
            //  他有一個特點，可以依賴當前資料改變之後進行重新計算
            computed: {
                checkAll: {

                    //設定值，當點選全選按鈕的時候觸發
                    set(v) {
                        this.list.forEach((item) => (item.checked = v))
                    },
                    //取值，當列表中的值改變之後觸發，需要return
                    get() {
                        return (
                            this.list.length ===
                            this.list.filter((item) => item.checked).length
                        )
                    }
                },
                //計算總價，選擇被選中的元素
                sumPrice() {
                    return this.list.filter((item) => item.checked).reduce((pre, cur) => {
                        return pre + cur.price * cur.quantity
                    }, 0)
                },

            },
            methods: {
                save() {
                    console.log(this.list.filter((item) => item.checked))
                }
            }
        })
</script>

<link rel="stylesheet" href="./bootstrap.min.css" rel="external nofollow" >