VUE实现简易购物车

最新推荐文章于 2024-07-17 17:57:11 发布
茶卡盐佑星_
最新推荐文章于 2024-07-17 17:57:11 发布
阅读量366
点赞数 5
文章标签： vue.js 前端 javascript
本文链接：https://blog.csdn.net/hexadecimal_001/article/details/140076954
版权
主要是对基础的指令的使用，直接上代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table {
            width: 500px;
            text-align: center;
            border-collapse: collapse;

        }

        table,
        th,
        td {
            border: 3px double black;
        }
        input{
            width: 120px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
</head>

<body>
    <div id="falsebody">
        <table id="tableBox" cellspacing="0" cellpadding="9">
            <tr>
                <td>名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>操作</td>
            </tr>


            <tbody>
                <tr v-for="(item,index) in goods" @click="changeColor(index)"
                    :style="{backgroundColor: k != index ? '' : '#0078D4'}">
                    <td>{{item.name}}</td>
                    <td>￥{{item.price}}</td>
                    <td>
                        <button type="button" @click="redruce(index)">-</button>
                        {{item.num}}
                        <button type="button" @click="plus(index)">+</button>
                    </td>
                    <td>
                        <button type="button" @click="editBlock(item,index)">编辑</button>
                        <button type="button" @click="del(index)">删除</button>
                    </td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td></td>
                    <td>总价:￥{{allPrice}}</td>
                    <td>总数量:{{allNum}}</td>
                    <td></td>
                </tr>
            </tfoot>
        </table>



        <button type="button" @click="addBlock()">添加商品</button>


        <div v-show="addShow">
            <input v-model="name" type="text" name="" value="" placeholder="名称" />&nbsp;
            <input v-model="price" type="number" name="" value="" placeholder="价格" />&nbsp;
            <input v-model="num" type="number" name="" value="" placeholder="数量" />&nbsp;
            <button type="button" @click="addSure()">确定</button>&nbsp;
            <button type="button" @click="addCancel()">取消</button>
        </div>


        <div v-show="editShow">
            <input v-model="editname" type="text" name="" />&nbsp;
            <input v-model="editprice" type="number" name="" />&nbsp;
            <input v-model="editnum" type="number" name="" />&nbsp;
            <button type="button" @click="editSure()">确定</button>&nbsp;
            <button type="button" @click="editCancel()">取消</button>
        </div>
    </div>

    <script>
        let { createApp, ref, reactive } = Vue;
        createApp({
            setup() {

                //假数据
                const goods = ref([
                    {
                        "name": "衣服",
                        "price": 39,
                        "num": 1
                    },
                    {
                        "name": "鞋子",
                        "price": 69,
                        "num": 1
                    }
                ])

                //减少商品数量
                function redruce(i) {
                    goods.value[i].num--;
                    // 不能减到负数
                    if (goods.value[i].num <= 0) {
                        goods.value[i].num = 0;
                    }
                    calculation();
                }

                //增加商品数量
                function plus(i) {
                    goods.value[i].num++;
                    calculation();
                };


                // 声明一个变量计算总价
                let allPrice = ref(0);
                // 声明一个变量计算总数量
                let allNum = ref(0);
                

                calculation();
                //计算总价格和总数量
                function calculation() {
                    allPrice.value = 0;
                    allNum.value = 0;
                    for (let i in goods.value) {
                        allPrice.value += goods.value[i].num * goods.value[i].price;
                        allNum.value += goods.value[i].num;
                    };
                };


                // 默认隐藏添加输入框
                let addShow = ref(false);

                // v-model添加 获取输入框输入的新数据
                let name = ref('');
                let price = ref('');
                let num = ref('');

                //点击添加
                function addBlock() {
                    name.value = '';
                    price.value = '';
                    num.value = '';
                    addShow.value = true;
                };

                //点击确定添加
                function addSure() {
                    // 判断不为空
                    if (name.value != '' && price.value != '' && num.value != '') {
                        // 添加的新数据
                        let newData = {
                            name: name.value,
                            price: price.value,
                            num: num.value
                        };

                        goods.value.push(newData);
                        addShow.value = false;
                        calculation();
                    };
                };
                //点击取消添加
                function addCancel() {
                    name.value = '';
                    price.value = '';
                    num.value = '';
                    addShow.value = false;
                };

                // v-model编辑 更改元数据
                let editname = ref('');
                let editprice = ref('');
                let editnum = ref('');
                //编辑的默认数据
                let defaultData = reactive(
                    {
                        editname: '',
                        editprice: '',
                        editnum: ''
                    }
                );


                //默认隐藏编辑输入框
                let editShow = ref(false);

                let index;// 接收点击编辑时传的下标
                //点击编辑按钮
                function editBlock(item, i) {
                    Object.assign(defaultData, item);
                    editname.value = item.name;
                    editprice.value = item.price;
                    editnum.value = item.num;
                    index = i;
                    editShow.value = true;
                };

                //点击确定编辑
                function editSure() {
                    goods.value[index].name = editname.value;
                    goods.value[index].price = editprice.value;
                    goods.value[index].num = editnum.value;
                    calculation();
                    editShow.value = false;
                };

                //点击取消编辑
                function editCancel() {
                    editShow.value = false;
                };

                //点击删除
                function del(i) {
                    goods.value.splice(i, 1);
                    editShow.value = false;
                    calculation();
                };





                //点击商品操作时改变背景颜色
                let k = ref();

                //点击换色
                function changeColor(i) {
                    k.value = i;
                };

                return {
                    goods,
                    allNum,
                    allPrice,
                    redruce,
                    plus,
                    name,
                    num,
                    price,

                    addShow,
                    addBlock,
                    addSure,
                    addCancel,

                    editShow,
                    defaultData,
                    editname,
                    editprice,
                    editnum,
                    editBlock,
                    editSure,
                    editCancel,

                    del,

                    k,
                    changeColor
                }
            }


        }).mount('#falsebody');

    </script>
</body>

</html>