用Vue实现的购物车功能

Javascript代码:

1. const app = Vue.createApp({
2. data() {
3. return {
4. chka:true,
5. list:[{check:true,num:1,price:100},{check:true,num:2,price:200},{check:true,num:3,price:300}],
6. }
7. },
8. computed: {
9. totalNum(){
10. return this.list.filter(item=>item.check).reduce((acc,item)=>acc+item.num,0);
11. },
12. totalAmount(){
13. return this.list.filter(item=>item.check).reduce((acc,item)=>acc+item.num*item.price,0);
14. }
15. },
16. methods: {
17. checkAll(){
18. this.chka=!this.chka;
19. this.list.forEach(item=>item.check=this.chka);
20. },
21. checkThis(index){
22. this.list[index].check=!this.list[index].check;
23. this.chka=this.list.every(item=>item.check==true);
24. }
25. },
26. }).mount('.box')

购物车图示：