vue实现简单的购物案例

一直说要学习vue,到现在都一直没有行动，平时下班就看看动漫，玩玩游戏，不想学习，就简单学了下几个指令，写了个购物的案例，没有参考别人怎么写的就是自己随便想出来的，就简单的实现了功能，代码可能写的不好

<div id="app">
     <div><input type="checkbox" @change="checkAll" :checked="checkAllStatus">全选
    <button v-if="checkAllStatus && list.length!=0" @click="removeAll">清空全部</button>
    <button  @click="addShoppingStatus=!addShoppingStatus">自定义商品</button>
    </div>
     <div v-for="(item,index) in list">
         <input type="checkbox" v-bind:value="item.id" v-bind:checked="item.checked" @change="checkOne">
         <button @click="add(item.id)">+</button>
         {{item.num}}
         <button @click="sub(item.id)">-</button>
        <span>{{item.name}}</span>
        <span>{{item.price}}</span>
        <button v-if="item.checked" @click="remove(item.id)">删除</button>
     </div>     
     <p v-show="totalPrice!=0">总价格: {{totalPrice}}</p>
     <div v-if="addShoppingStatus">
     <!-- <label for="addimg">图片地址:
                <input id="addimg" type="text" v-bind:value="url">
            </label> -->
            <label for="addName">商品名称:
                <input id="addName" type="text" v-model="name">
        </label>
        <label for="addName">商品价格:
            <input id="addName" type="text" v-model="price">
    </label>
      <button @click="addUser" v-on:keyup.enter="addUser">添加商品</button>
      </div>   
     </div>    
</div>  

vue

 var vue = new Vue({
         el: '#app',
         data: {
             list: [
                 {id: 0, name: '苹果11', price: 5000, checked: false, num:1},
                 {id: 1, name: 'MAC电脑', price: 15000, checked: false, num:1},
                 {id: 2, name: '惠普笔记本', price: 6000, checked: false, num:1},
             ],
             totalPrice: 0,
             checkAllStatus: false,
             name: '',
             price: '',
             addShoppingStatus: false
         },
         methods: {
                checkOne(e) {
                    this.totalPrice = 0
                    let index = this.list.findIndex(item => item.id == e.target.value)
                    this.list[index].checked = !this.list[index].checked
                    this.checkAllStatus = this.list.every(item =>item.checked === true )
                    this.total()
                },
                total() {
                    this.totalPrice = 0
                    this.list.forEach(item => {
                         if(item.checked) {
                            this.totalPrice += item.price * item.num
                         }
                    })
                },
                add(id) {
                     this.list.forEach(item => {
                          if(item.id == id) {
                              item. num ++
                              if(item.checked) {
                                  this.total()
                              }
                          }
                     })
                },
                sub(id) {
                    this.list.forEach(item => {
                          if(item.id == id) {
                              item.num <=0 ? item.num = 0 : item.num--
                              if(item.checked) {
                                this.total()
                              }
                          }
                     })
                },
                remove(id) {
                     let index = this.list.findIndex(item => item.id == id)
                     this.list.splice(index,1)
                     if(this.list.length ===0) {
                        this.checkAllStatus = false
                     }
                     this.total()
                },
                removeAll() {
                    let rs =  window.prompt('请输入确认删除后执行删除操作')
                    if(rs == '确认删除') {
                        this.list = []
                        this.totalPrice = 0
                        this.checkAllStatus = false
                    }
                },
                checkAll() {
                    this.totalPrice = 0
                     if(!this.checkAllStatus) {
                        this.list.forEach(item => {
                            item.checked = true 
                            this.totalPrice += item.price * item.num
                        } )
                        this.checkAllStatus = true
                     }else {
                        this.list.forEach(item =>{
                             item.checked = false
                             this.totalPrice = 0
                        })
                        this.checkAllStatus = false
                     }
                },
                addUser() {
                     let obj = {
                           id: this.list.length,
                           name: this.name,
                           price: this.price,
                           checked: false,
                           num: 1
                     }
                     this.list.push(obj)
                     this.name = ''
                     this.price = ''
                     this.addShoppingStatus= false
                }
         }
     })

全选，单选，以及批量删除和单个删除，新增商品的功能，当选择了商品后，才会计算价格，就是这样了