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);
        }
    }
});