vue购物小案例的实现-表单

最新推荐文章于 2023-04-04 00:47:45 发布

Nancy-sn

最新推荐文章于 2023-04-04 00:47:45 发布

阅读量288

点赞数

分类专栏： js 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/mariodf/article/details/125347855

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这是一个使用Vue.js编写的购物车应用示例，包括商品的数量增减、删除以及总价计算功能。用户可以对每个商品进行数量的增加或减少，并通过点击删除按钮移除商品。商品的总价会随着数量的变化实时更新。代码中定义了`mytitle`、`mycontent`和`mytotal`三个组件，分别用于显示购物车标题、内容和总价。当用户点击删除按钮时，会触发父组件的方法删除对应的商品项。

摘要由CSDN通过智能技术生成

能够对商品进行数量的修改以及删除操作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 800px;
            display: flex;
            flex-direction: column;
            border: 1px solid #000;
        }

        .box>.title>div {
            width: 800px;
            display: flex;
            text-align: center;
        }

        .box>.title>div li {
            flex: 1;
            border: 1px solid #000;
        }

        .content {
            width: 800px;
        }

        .content .item {
            display: flex;
        }

        .content .item li {
            flex: 1;
            border: 1px solid #000;
        }

        .item {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <mytitle></mytitle>
        <mycontent :goods="goods" @mydel="remove"></mycontent>
        <mytotal :goods="goods"></mytotal>
    </div>
</body>

</html>

<script>
    //全局
    Vue.filter("format", function (val, str) {
        var date = new Date(val);
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    })
    //头部
    Vue.component("mytitle", {
        template: `
                <div class="title">
                    <h1>购物车列表</h1>
                    <div>
                        <li>编号</li>
                        <li>商品名称</li>
                        <li>商品价格</li>
                        <li>数量</li>
                        <li>金额</li>
                        <li style="width:80px">时间</li>
                        <li>操作</li>
                    </div>
              </div>
        `
    })
    //内容
    Vue.component("mycontent", {
        props: ["goods"], //如同 data
        template: `
        <div class="content">
            <div class="item" v-for="(item,index) in goods" :key="item.id">
                <li>{{item.id}}</li>
                <li>{{item.name}}</li>
                <li>{{item.price}}</li>
                <li>
                    <button @click="sub(index)">-</button>
                    <input style="width:25px" v-model="item.num">
                    <button @click="sup(index)">+</button>
                </li>
                <li>{{item.price*item.num}}</li>
                <li style="width:80px">
                    {{item.time|format}}
                </li>
                <li>
                    <a @click="del(index)">删除</a>
                </li>
            </div>
        </div>
        `,
        methods: {
            sub(index) {
                if (this.goods[index].num <= 1) {
                    return;
                }
                this.goods[index].num--;
            },
            sup(index) {
                this.goods[index].num++;
            },

            del(index) {
                // if (!confirm("确定要删除吗?")) {
                //     return;
                // }
                // this.goods.splice(index, 1);
                this.$emit("mydel",index);
            }
        },
    })
    //底部
    Vue.component("mytotal", {
        props: ["goods"],
        template: `
        <div class="total">
            总金额:{{total}}
        </div>
        `,
        computed: {
            total() {
                var money = 0;
                for (var i = 0; i < this.goods.length; i++) {
                    money += this.goods[i].num * this.goods[i].price;
                }
                return money
            }
        },
    })

    new Vue({
        el: ".box",
        data: {
            goods: [
                { id: 1, name: "衣服", price: 68, num: 1, time: Date.now() },
                { id: 2, name: "鞋子", price: 208, num: 2, time: Date.now() },
                { id: 3, name: "帽子", price: 9.9, num: 1, time: Date.now() },
                { id: 4, name: "项链", price: 938, num: 1, time: Date.now() }
            ]
        },
        methods:{
            remove(index){
                if(!confirm("确定要删除吗")){
                    return
                }
                this.goods.splice(index,1);
            }
        }
    })

</script>

运行结果：