利用vue双向事件绑定实现极简购物车功能（v-model）

项目需求
++ 展示购物车内商品列表，包括名称、数量、价格、勾选框、加减按钮、总金额等。
++ 勾选复选框，获取该商品的价格和数量，并通过计算得出所有勾选商品的总价。
++勾选全选框，全部商品的复选框都被勾选；而当全部商品的勾选框均被勾选时，全选框自动被勾选。同时，勾选商品的总价也会随之变化。
++ 通过加减按钮，来增加或减少商品数量，同时，勾选商品的总价也会随之变化。

具体实现

1.展示购物车内商品列表，包括名称、数量、价格等。

html代码

    <div id="box">
        <input type="checkbox" /> //全选框
        <ul>
            <li v-for="data in datalist">
                <input type="checkbox"> {
  {data}} 
                <button>-</button> {
  {data.number}}
                <button>+</button> 
            </li>  //li的个数根据动态遍历出来的数据个数来确定
        </ul>
        <p>总金额计算：<span></span></p>
    </div>

js代码

<script>
    var vm = new Vue({
   
        el: "#box",
        data: {
   
            datalist: [{
   
                name: "商品1",
                price: 10,
                number: 1,
                id: "1",
            }, {
   
                name: "商品2",
                price: 30,
                number: 5,
                id: "2",
            }, {
   
                name: "商品3",
                price: 6,
                number: 11,
                id: "3",
            }]
        }
    })
</script>

2. 勾选复选框，获取该商品的价格和数量，并通过计算得出所有勾选商品的总价。

<div id="box">
        <ul>
            <li v-for="data in datalist">
                <input type="checkbox" v-model="checkgroup"