vue单页面_购物车案例

Vue购物车的小案例

案例介绍：
这个购物车案例呢4个部分：1、删除选中；2、全选，分选，3、数量影响价格；4、显示所有选中商品总价

<template>
    <div>
        <table>
            <tr border='1'>
                <td>
                    <span>全选</span>
                    <input type="checkbox" @change="all" v-model="flag">
                </td>
                <td>商品</td>
                <td>数量</td>
                <td>单价</td>
                <td>金额(元)</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,key) in list" :key="key">
                <td>
                    <input type="checkbox" v-model="arr" :value="item.id">
                </td>
                <td class="td">
                    <div>
                        <img :src="'/static/img/' + item.img" alt="">
                    </div>
                    <div>
                        {{item.name}}
                    </div>
                </td>
                <td>
                    <button @click="subtract(key)">-</button>
                    {{item.num}}
                    <button @click="add(key)">+</button>
                </td>
                <td>${{item.price}}</td>
                <td>${{item.num*item.num}}</td>
                <td>
                    <button @click="del(key)">删除</button>
                </td>
            </tr>
        </table>
        <button @click="xdel()">选中删除</button>
        <div>
            <span>商品总计:</span>
            {{getcount}}
        </div>
        <div>
            <span @click="js">结算</span>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        name:'Cart',
        data() {
            return {
                list:null,
                arr:[],
                flag:false,
                newAdd:[]
            }
        },
        mounted() {
        //这里呢是自己本地模拟的json，使用axios请求
            axios({
                url:'/static/goods.json',
                methods:'get',
            }).then(res => {
                this.list = res.data;
            })
        },
        methods: {
        	//删除，通过splice这个方法，使用传过来的每个商品的下标删除相对应的商品
            del(key) {
                this.list.splice(key,1)
            },
            //加
            add(key) {
                this.list[key].num++
            },
            //减
            subtract(key) {
                this.list[key].num--;
                if(this.list[key].num<=0) {
                    if(confirm("是否要删除商品")) {
                        this.list.splice(key,1);
                    }else {
                        this.list[key].num = 1;
                    }
                }
            },
            //全选反选
            //思路:1、设置一个flag 关联控制列表的复选框
				 //2、给控制列表的复选框添加chang事件，
				 //当值发生改变的时候判断flag的值，
				 //如果是true将列表中的所有id存储到arr中，如果是false，
				 //将arr置为空
            all() {
                this.arr=[];
               if(this.flag) {
                   this.list.forEach(item=>{
                       this.arr.push(item.id)
                   })
               }else{
                   this.arr=[]
               }
            },
            // 选中删除
            //思路：
            		//1、//设置空数组arr，让列表选项复选框关联这个数组，
            		//给列表的复选框绑定value属性是item.id,
            		//那么在数组中存储的就是我选中列表的id
            		//2、可以给button设置点击事件，进行删除元素
						//要遍历arr,然后再遍历list,如果id相等进行删除
	
            xdel() {
                this.arr.forEach(item=>{
                    this.list.forEach((it,k)=>{
                        if(item == it.id) {
                            this.list.splice(k,1);
                        }
                    })
                })
            },
            //结算
            js() {
                this.arr.forEach(item=>{
                    this.newAdd.push(item)
                    this.newAdd = this.arr = [];
                
                })
            }
        },
        //计算商品的价钱
        computed: {
            getcount() {
                let sum = 0;
                for(let i in this.arr) {
                    for(let j in this.list) {
                        if(this.arr[i] == this.list[j].id) {
                            sum+=this.list[j].price*this.list[j].num
                        }
                    }
                }
                return sum;
            }
        },
        // 监听arr数组的长度的变化
        watch:{
        //在这里我们要给arr设置监听事件	如果arr的长度和list的长度相等，
        //将flag设置为true，如果不相等设置为false
            arr:{
                handler(val) {
                    if(val.length == this.list.length) {
                        this.flag = true
                    }else {
                        this.flag = false
                    }
                }
            }
        }
    }
</script>

<style  scoped>
table {
    width: 70%;
    text-align: center;
    margin: 0 auto;
}
tr{
    border: 1px solid black;
}
td>img {
     width: 60px;
    height: 60px;
}
.td {
    display: flex;
    align-items: center;
    justify-content: space-around
}
</style>