Vue第一周实现购物车小案例分享

相信大家一路从原生js过来一路非常的不容易学到最后越来越简单，Vue第一周的购物车小案例分享给大家，祝大家学的开心月薪过万！~~~

下面是效果图

下面是代码：

<div id="app">
        <table border="1">
            <tr>
                <th></th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
            </tr>
            <tr v-for="item in goods" :key="item.name">//这里遍历goods的数据
                <td><input type="checkbox" v-model="item.ad"></td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td><button @click="item.num++">{{item.num}}</button></td>
            </tr>
        </table>
        <p>
            总价：{{yy}}一共：{{cc}}件
        </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            computed: {
                yy() {
                    //定义一个为0的变量
                    var j = 0;
                    this.goods.forEach(item => {
                        //如果ad为true才计算
                        if (item.ad) {
                            //总计就等于数量乘单价
                            j += item.num * item.price
                        }
                    })
                    return j
                },
                cc() {
                    var j = 0;
                    this.goods.forEach(item => {
                        if (item.ad) {
                            j = item.num + j
                        }
                    })
                    return j
                }
            },
            data() {
                return {
                    goods: [{
                        //书名等数据
                        name: "js入门", price: 20, num: 1, ad: true
                    },
                    {
                        name: "vue入门", price: 15.5, num: 2, ad: false,
                    }
                    ]
                }
            }
        })
    </script>