vue简单购物车

功能介绍：

1.点击加减按钮实现每个商品数量的加减

2.点击编辑回显并且可以修改保存  

3.点击删除删除该列表

4.点击添加商品

5.更多细节可以亲手操作领悟

 html：

 <div id="app" v-cloak>
        <table>
            <thead>
                <tr>
                    <td>名称</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-bind:style="item.num > 0 ? 'background:#ffff00;' : '' " v-for="(item,index) in arr"
                    :key="item.index">
                    <th>{{item.name}}</th>
                    <th>￥{{item.pic}}</th>
                    <th>
                        <button @click="jian(item)" v-if="item.num > 0">-</button>
                        {{item.num}}
                        <button @click="jia(item)">+</button>
                    </th>
                    <th>
                        <button @click="edit(item)">编辑</button>
                        <button @click="del(index,item)">删除</button>
                    </th>
                </tr>
                <tr>
                    <th></th>
                    <th>总价:￥{{zongjia}}</th>
                    <th>总数量:{{zongshu}}</th>
                    <th></th>
                </tr>
            </tbody>
        </table>
        <button @click="on">添加商品</button>
        <div v-if="!status">
            <button @click="baocun">保存</button><button @click="quxiao">取消</button><input placeholder="请输入商品名称"
                v-model="name" type="text"><input placeholder="请输入商品价格" v-model="price" type="number">

        </div>
        <div v-show="!zhuangtai">
            <button @click="baocun1(index,item)">保存</button><button @click="quxiao">取消</button><input
                placeholder="请输入商品名称" v-model="product_name" type="text"><input placeholder="请输入商品价格" v-model="commodity_price" type="number">

        </div>
    </div>

css：

<style>
        table {
            text-align: center;
            border: 1px solid #847979;
        }

        tr {
            border: 1px solid #847979;
        }

        th {
            width: 150px;
            height: 50px;
            border: 1px solid #847979;
        }

        td {
            width: 150px;
            height: 50px;

            border: 1px solid #847979;
        }

        [v-cloak] {
            display: none;
        }
    </style>

js：

 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        let index = 0;
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    arr: [
                        {
                            index: index++,
                            name: '商品一',
                            pic: 10,
                            num: 0,
                            style: 'red;'
                        },
                        {
                            index: index++,
                            name: '商品二',
                            pic: 100,
                            num: 0,
                            style: 'blue;'
                        }, {
                            index: index++,
                            name: '商品三',
                            pic: 150,
                            num: 0,
                            style: 'red;'
                        }
                    ],
                    //总数
                    zongshu: 0,
                    //总价
                    zongjia: 0,
                    //状态
                    status: true,
                    //状态
                    zhuangtai: true,
                    //添加的单价
                    price: 0,
                    //编辑的名称
                    product_name: '',
                    //编辑的单价
                    commodity_price: 0,
                    // name: '暂无名称',
                    //下标
                    number: 0
                };
            },
            methods: {
                //加按钮
                jia(item) {
                    //对应的数量++
                    item.num++;
                    //总数++
                    this.zongshu++;
                    //总价加等于单价
                    this.zongjia += item.pic;
                },
                //减按钮
                jian(item) {
                    //对应的数量--
                    item.num--;
                    //总数--
                    this.zongshu--;
                    //总价减等于单价
                    this.zongjia -= item.pic;
                },
                //添加商品显示输入框
                on() {
                    //判断的状态
                    this.zhuangtai = true;
                    this.status = false;
                },
                //点击取消隐藏
                quxiao() {
                    //判断的状态
                    this.status = true;
                    this.zhuangtai = true;
                    this.product_name = '';
                    this.commodity_price = '';
                },
                //保存
                baocun() {
                    //新增   加一个对象
                    this.arr.push({
                        index: index++,
                        name: this.name,
                        pic: this.price,
                        num: 0,
                        style: 'red;'
                    })
                },
                //删除
                del(i, item) {
                    //删除指定下标的数据
                    this.arr.splice(i, 1);
                    //总数减等于对应的数量
                    this.zongshu -= parseInt(item.num);
                    //总价减等于对应的数量乘单价
                    this.zongjia -= item.num * parseInt(item.pic);
                },
                //编辑
                edit(item) {
                    //判断的状态
                    this.status = true;
                    this.zhuangtai = false;
                    // this.product_name = '';
                    // this.commodity_price = '';
                    //让名称输入框的值等于对应下标的名称
                    this.product_name = item.name;
                    //让单价输入框的值等于对应下标的单价
                    this.commodity_price = item.pic;
                    //下标
                    this.number = item.index;
                },
                //编辑保存
                baocun1(i, item) {
                    //给总价初始化
                    this.zongjia = 0;
                    //修改对应下标的名称
                    this.arr[this.number].name = this.product_name;
                    //修改对应下标的单价
                    this.arr[this.number].pic = this.commodity_price;
                    //从新给总价计算
                    for (let s in this.arr) {
                        this.zongjia += parseInt(this.arr[s].pic) * parseInt(this.arr[s].num);
                    }
                }
            }
        }).mount('#app')
    </script>