vue实现商品累计效果

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