vue实现商品累计效果

vue实现商品累计需要以下几点

1.添加商品

2.选中

3.删除功能

4.总计功能

  <div id="main">
         <div class="con">
             <h1>PRODUCT</h1>
             <div class="add">
                 <span>商品:</span>
                     <input
                        v-model.trim="goods"
                     >
                 <span>价格:</span>
                     <input
                     v-model.trim="price"
                     @input="judge"
                     >
                 <button @click="add">添加</button>
             </div>
             <ul>
                 <li v-for="(val,key) in arr"
                     :class="{active:val.active}"
                 >
                     <input type="checkbox" v-model="val.active">
                     <span>{{val.name}}</span>
                     <span>${{val.price}}</span>
                     <!-- <span>修改</span> -->
                     <span @click="rm(val.id)">删除</span>
                 </li>
             </ul>

             <div class="folter">
                 <span>total</span>
                 <span>{{sum}}</span>
             </div>
             <div
                 class="kuang"
                 :style="{display:tips}"
             >
                     <span>确定要删除么？</span>
                     <button @click="sure">确定</button>
                     <button @click="cancel">取消</button>
             </div>

         </div>

     </div>
 <script src="../js/vue.min.js"></script>

 /*
 1、添加商品
 2、选中
 3、删除
 4、总计
 */
 new Vue({
     el:'#main',
     created(){
     //     //请求数据，添加数据
     //    fetch('./data.json')
     //    .then(e=>e.json())
     //    .then(d=>{
     //        console.log(d);
     //        this.arr.push(...d);
     //    })
     },
     data:{
         arr:[
             {
                 id:1,
                 name:'apple',
                 price:20,
                 active:true
             },{
                 id:2,
                 name:'orange',
                 price:23,
                 active:false
             },
             {
                 id:3,
                 name:'banana',
                 price:40,
                 active:false
             }
         ],
         goods:'',//商品
         price:'',//价格
         tips:'none',//提示框
         num:null
     },
     methods:{
         judge(){
             //判断输入的价格是否为数字，且小于4位，小数保留两位数
             if(!/^\d{1,4}(\.\d{1,2})?$/.test(this.price)){
                 alert('输入正确的价格');
             }
         },
         add(){
             let {price,goods} = this;
             this.arr.unshift(
                 {
                     id:Date.now(),
                     name:goods,
                     price:price,
                     active:false
                 }
             )
             this.val = this.price = '';
         },
         rm(id){
             this.tips = 'block';
             this.num = id //把要删除的id，赋值给this.num,为了找到删除的那项
             console.log(this.num);
         },
         sure(){
             //把不是this.num的数据保留下来（过滤删除的id对应的数据）
             this.arr = this.arr.filter(e=>e.id!=this.num);
             this.tips = 'none';
             this.num = null;
         },
         cancel(){
             //隐藏弹框
             this.tips = 'none';
             this.num = null;
         }
     },
     computed:{
     /*
                 是vue专有的一个计算属性
                     当数据发生变化的时候，通过变化的数据，做另一件事
                 只要使用，一开始就会执行一次，之后只要数据发生变化就执行

                 定义:
                     函数(){
                         return 是什么，显示就是什么
                     }
                 使用:
                     {{函数名}}

                 注意:
                     函数名不要跟data中的数据一致
             */
         sum(){
             return '$' + this.arr.filter(e=>e.active).reduce((prev,num)=>prev+num.price,0);
         }
     }
 });