购物车案例（1）

首先将数据显示在页面上，写法如下：

var vm = new Vue({
            el:"#box",
            data:{
                checkgroup:[],
                datalist:[
                    {
                        name:"商品1",
                        price:10,
                        number:1,
                        id:1
                    },
                    {
                        name:"商品2",
                        price:20,
                        number:2,
                        id:2
                    },
                    {
                        name:"商品3",
                        price:30,
                        number:3,
                        id:3
                    },
                    {
                        name:"商品4",
                        price:40,
                        number:4,
                        id:4
                    },
                ]
            },
            })

实现功能一：将勾选中的商品进行金额计算。
思路： 首先先判定复选框的勾选状态，判定多选框勾选状态，用的方法是双向数据绑定一个数组
双向数据绑定数组写法： 中，v-model=“checkground” 绑定了一个数组

在vue写法：
为了方便观察其选中状态，将其显示页面上

遇到问题：在页面显示发现勾选一个复选框，所有的复选框都会被选中，且页面显示数据什么都没有

解决这个问题方法：在复选框加上value属性,且value还是动态绑定，动态绑定要在value前面加上 “:”，（后面写法类似与原生js写法）后面值要加显示的数据的值，如显示的是number ，拿到哪个数据则显示其数据

将data数据存放在checkgroup数组里