广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现购物车全部功能的简单方法
  • 686

0
分享到

vue实现购物车全部功能的简单方法

2024-04-02 19:04:59 686人浏览 泡泡鱼
摘要

主要功能如下： 增加商品信息 修改商品信息 删除单个商品 删除多个商品 清空购物车 对商品单价进行降序排序 根据商品名称实现

主要功能如下：

  1. 增加商品信息
  2. 修改商品信息
  3. 删除单个商品
  4. 删除多个商品
  5. 清空购物车
  6. 对商品单价进行降序排序
  7. 根据商品名称实现查找
  8. 实现商品数量加减
  9. 全选反选
  10. 实现勾选商品的总价计算

效果图如下：

由于功能比较多就不一个个讲了，我们先来讲几个主要功能的逻辑（增删改查），最后放全放部代码

首先我们先来看增加商品功能


//先来一个按钮绑定显示事件，点击添加后出现一个弹窗
<button type="button" @click="xian">添加</button>


//return 中定义了一个dis默认为false
 xian() {
                if (!this.dis == false) {
                    this.dis = false
                } else {
                    this.dis = true
                }
            },

然后再弹窗中点击确认修改，绑定一个事件把商品信息添加进去


           <button type="button" @click="tian">确认添加</button>


 //将要添加的商品信息push到一个新的数组中，添加完成之后关闭弹窗
 tian() {
                if (this.name == "" || this.counrty == "" || this.price == "") {
                    alert("商品信息不允许为空！")
                    return false
                } else {

                    this.shopPings.push({
                        name: this.name,
                        counrty: this.counrty,
                        price: this.price,
                        count: this.count,
                    })
                }
                this.name = "",
                    this.counrty = "",
                    this.price = "",
                    this.count = ""
                this.dis = false
            },

商品增加进去之后突然发现商品信息写错了！！？？不要慌，接下来带大家看看修改功能

还是老规矩先定义一个按钮绑定显示事件，然后绑定显示事件，除了事件名称之外，跟上面添加类同，我们直接来看确认修改功能


//定义按钮绑定事件
   <button type="button" @click="xiugai">确认修改</button>
   //将购物车中的商品信息跟修改之后的进行赋值修改，修改完成之后关闭弹窗
    xiugai() {
                console.log(this.int)
                let index = this.int
                console.log(this.name, this.price, this.count, )
                this.shopPings[index].name = this.name
                this.shopPings[index].price = this.price
                this.shopPings[index].counrty = this.counrty
                this.shopPings[index].count = this.count

                this.dis1 = false
            },

有了增加修改之后我们再来写一个删除

定义一个按钮绑定事件，传入一个index值最后splice根据下标删除一条


定义一个按钮绑定事件，传入一个index值最后splice根据下标删除一条
 <button @click="del(index)">删除</button>	
  del(index) {
                this.shopPings.splice(index, 1);
            },

清空购物车的话就比较简单了直接设置按钮点击后数组为空即可


 alldel() {
                this.shopPings = []
            },

最后我们来看一下购物车中的查询功能


//return中设置input的value值
//定义一个input框，绑定value值，设置enter键盘事件并且绑定搜索事件
<input type="text" placeholder="请输入要查询的商品名称" v-model="input_value" @keyup.13="search">

具体看注释


//先来一个判断判断搜索框为空的时候进行查询会有提示信息不允许为空
//然后拿到数组中的每一项的名称进行查找如果没有这个商品名称则提示没有该商品
//最后对数组filter进行筛选，通过搜索框中输入的商品名称对比购物车中的商品名称来找到对应商品
 search() {
                if (!this.input_value) {
                    return alert('请输入内容')
                }
                if (
                    this.shopPings.every((v) => {
                        v.name.indexOf(this.input_value) == -1
                    })
                ) {
                    this.input_value = ''
                    return alert('没有此商品')
                }
                this.shopPings = this.shopPings.filter((v) => {
                    v.name.replace(this.input_value, this.input_value)
                    return v.name.indexOf(this.input_value) != -1
                })
            }

全部代码：


<template>
    <div class="shopCar">
        <header>

            <button type="button" @click="delSelect">批量删除</button>
            <button type="button" @click="alldel">清空购物车</button>
            <button type="button" @click="xian">添加</button>
            <button type="button" @click="jiang">排序</button>
            <input type="text" placeholder="请输入要查询的商品名称" v-model="input_value" @keyup.13="search">
            <div class="xiu" v-show="dis1">
                <input type="text" placeholder="名称" v-model="name">
                <input type="text" placeholder="价格" v-model="price">
                <input type="text" placeholder="数量" v-model="count">
                <input type="text" placeholder="产地" v-model="counrty">

                <button type="button" @click="xiugai">确认修改</button>
            </div>
            <div class="add" v-show="dis">
                <input type="text" placeholder="名称" v-model="name">
                <input type="text" placeholder="价格" v-model="price">
                <input type="text" placeholder="数量" v-model="count">
                <input type="text" placeholder="产地" v-model="counrty">

                <button type="button" @click="tian">确认添加</button>
            </div>
        </header>
        <main>
            <ul>
                <li>
                    <p><input type="checkbox" v-model="allChecked">
                        全选</p>
                    <p>名称</p>
                    <p>产地</p>
                    <p>数量</p>
                    <p>单价</p>
                    <p>小计</p>
                    <p>操作</p>
                </li>
                <li v-for="(item,index) in shopPings" :key="index">
                    <p><input type="checkbox" v-model="item.checked">{{item.id}}</p>
                    <p>{{item.name}}</p>
                    <p>{{item.counrty}}</p>
                    <p><button type="button" @click="add(item)">+</button>
                        <input type="text" v-model="item.count" style="width:20px">
                        <button type="button" @click="remove(item)">-</button>
                    </p>
                    <p>{{item.price}}</p>
                    <p>{{item.price*item.count |suffix}}</p>
                    <p>
                        <button type="button" @click="xiu(index)"> 修改</button>

                        <button @click="del(index)">删除</button>
                    </p>
                </li>
            </ul>
        </main>
        <footer>
            <p>总计{{state.sum |suffix}}</p>
        </footer>
    </div>
</template>
<style scoped lang="sCSS">
    .shopCar {
        width: 1000px;
        border: 2px solid black;
        margin: 100px auto;
        overflow: auto;

        header {
            display: flex;
            justify-content: space-between;
            width: 600px;
            height: 27px;
            overflow: hidden;

            .add {
                width: 400px;
                background: #e4e1e1;
                position: absolute;
                left: 39%;
                top: 40%;

                input {
                    display: block;
                    margin: 20px auto;

                }

                button {
                    display: block;
                    margin: 0 auto;
                }
            }

            .xiu {
                width: 400px;
                background: #e4e1e1;
                position: absolute;
                left: 39%;
                top: 40%;

                input {
                    display: block;
                    margin: 20px auto;

                }

                button {
                    display: block;
                    margin: 0 auto;
                }
            }
        }

        main {
            // height: 400px;
            margin-top: 10px;

            ul {

                li {
                    height: 78px;
                    border-bottom: 2px solid black;
                    display: flex;
                    justify-content: space-between;

                    p {
                        float: left;
                        width: 140px;
                        height: 27px;
                        border: 2px solid black;
                        text-align: center;
                    }
                }
            }
        }

        footer {
            height: 50px;
            margin-top: 13px;
            line-height: 50px;
        }
    }
</style>
<script>
    const shopData = [{
            id: "",
            name: "鞋子",
            counrty: "山西",
            count: 1,
            price: 800,
        },
        {
            id: "",
            name: "橱柜",
            counrty: "北京",
            count: 1,
            price: 3200,
        },
        {
            id: "",
            name: "口红",
            counrty: "河北",
            count: 2,
            price: 200,
        },
        {
            id: "",
            name: "汉堡",
            counrty: "河南",
            count: 2,
            price: 200,

        },

    ]

    export default {
        //过滤器
        filters: {
            suffix(value) {
                let price = Number(value)
                return `￥ ${price.toFixed(2)}`
                //在金额前面插入一个￥符号然后定义小数点后面为俩位数字
            }
        },
        computed: {

            //全选
            allChecked: {
                get() {
                    const checkeds = this.shopPings.filter((item) => item.checked)
                    return checkeds.length === this.shopPings.length
                },
                set(state) {
                    // console.log(state)
                    this.shopPings.map((item) => {
                        item.checked = state
                        return item
                    })
                }
            },
            //小计计算
            totalPrice: function () {
                var total = 0;
                for (var i = 0; i < this.checkList.length; i++) {
                    var item = this.checkList[i];
                    total += item.price * item.count;
                }
                return total.toLocaleString();
            },
            //选中的商品总价计算
            state() {
                const checkeds = this.shopPings.filter((item) => item.checked)
                const checked = checkeds.length === this.shopPings.length
                const sum = checkeds.reduce((a, b) => {
                    return a + b.count * b.price;
                }, 0)
                return {
                    count: checkeds.length,
                    sum
                }
            },
        },
        data() {
            return {
                shopPings: [],
                dis: false, //确认提交
                dis1: false, //确认修改
                id: "",
                name: "", //名称
                price: "", //单价
                count: "", //数量
                counrty: "", //产地
                input_value: "", //查询框中input的值
            }
        },
        mounted() {
            window.fetch("/").then(() => {
                this.shopPings = shopData.map((item) => {
                    item.checked = false
                    return item
                })
            })
        },
        methods: {
            //添加商品
            xian() {
                if (!this.dis == false) {
                    this.dis = false
                } else {
                    this.dis = true
                }
            },
            //确认添加
            tian() {
                if (this.name == "" || this.counrty == "" || this.price == "") {
                    alert("商品信息不允许为空！")
                    return false
                } else {

                    this.shopPings.push({
                        name: this.name,
                        counrty: this.counrty,
                        price: this.price,
                        count: this.count,
                    })
                }
                this.name = "",
                    this.counrty = "",
                    this.price = "",
                    this.count = ""
                this.dis = false
            },

            //删除商品
            del(index) {
                this.shopPings.splice(index, 1);
            },

            //删除选中的商品
            delSelect() {
                this.shopPings = this.shopPings.filter((item) => {
                    if (!item.checked) {
                        return item
                    }
                })
            },
            //全部删除
            alldel() {
                this.shopPings = []
            },
            //减少购买
            remove(data) {
                if (data.count > 0) {
                    data.count--
                }
                if (data.count === 0) {
                    data.checked = false
                }
            },
            //增加购买
            add(data) {
                data.count++
            },
            //修改商品
            xiu(i) {
                this.int = i
                if (!this.dis1 == false) {
                    this.dis1 = false
                } else {
                    this.dis1 = true
                }
            },
            // 确认修改
            xiugai() {
                console.log(this.int)
                let index = this.int
                console.log(this.name, this.price, this.count, )
                this.shopPings[index].name = this.name
                this.shopPings[index].price = this.price
                this.shopPings[index].counrty = this.counrty
                this.shopPings[index].count = this.count

                this.dis1 = false
            },
            //降序
            jiang() {
                this.shopPings.sort((a, b) => {
                    //排序基于的数据
                    return a.price - b.price;
                })
            },
            search() {
                if (!this.input_value) {
                    return alert('请输入内容')
                }
                if (
                    this.shopPings.every((v) => {
                        v.name.indexOf(this.input_value) == -1
                    })
                ) {
                    this.input_value = ''
                    return alert('没有此商品')
                }
                this.shopPings = this.shopPings.filter((v) => {
                    v.name.replace(this.input_value, this.input_value)
                    return v.name.indexOf(this.input_value) != -1
                })
            }

        }
    }
</script>

总结

到此这篇关于Vue实现购物车全部功能的文章就介绍到这了,更多相关vue实现购物车功能内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue实现购物车全部功能的简单方法

本文链接: https://www.lsjlt.com/news/129892.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • vue实现购物车全部功能的简单方法
    主要功能如下： 增加商品信息 修改商品信息 删除单个商品 删除多个商品 清空购物车 对商品单价进行降序排序 根据商品名称实现...
    99+
    2022-11-12
  • vue实现简单的购物车功能
    本文实例为大家分享了vue实现简单购物车功能的具体代码，供大家参考，具体内容如下 1.实现效果： 2.涉及到的知识点： toFixed函数、过滤器、reduce高阶函数、v-bin...
    99+
    2022-11-13
  • vue简单实现购物车结算功能
    本文实例为大家分享了vue简单实现购物车结算的具体代码，供大家参考，具体内容如下 样式没有写 <template>  <div class="about cont...
    99+
    2022-11-13
  • vue如何实现简单的购物车功能
    这篇文章主要介绍“vue如何实现简单的购物车功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue如何实现简单的购物车功能”文章能帮助大家解决问题。1.实现效果：2.涉及到的知识点：toFixed...
    99+
    2023-07-02
  • Android实现简单购物车功能
    本文实例为大家分享了Android实现购物车功能的具体代码，供大家参考，具体内容如下MainActivity布局：<?xml version="1.0" encoding="utf-8"?><LinearL...
    99+
    2023-05-30
    android 购物车 roi
  • vuex实现简单的购物车功能
    本文实例为大家分享了vuex实现购物车功能的具体代码，供大家参考，具体内容如下 文件目录如下： 购物车组件 <template> <div> ...
    99+
    2022-11-12
  • jQuery实现全部购物车功能实例
    目录一、全选二、增减商品数量三、修改商品小计四、计算总计和总和五、删除商品 六、选中商品添加背景七、html 全部核心代码今天是一些购物车的基本功能实现，全选、增减商品数量、修改商品...
    99+
    2022-11-12
  • Android中RecyclerView实现简单购物车功能
    Android中RecyclerView实现简单的购物车，供大家参考，具体内容如下 我们知道在ListView中用setTag来解决Item的复用问题,但是RecyclerView中...
    99+
    2022-11-13
  • 利用session实现简单购物车功能
    本文实例为大家分享了利用session实现简单购物车功能的具体代码，供大家参考，具体内容如下 一、实现的功能 （1） 利用session实现购物车中的物品添加。（2）使用servle...
    99+
    2022-11-13
  • php实现简单加入购物车功能
    以下是一个简单的PHP代码示例，实现了一个简单的加入购物车功能。```php```使用上述代码，可以通过发送POST请求将商品加入购...
    99+
    2023-08-15
    PHP
  • vuex怎么实现简单的购物车功能
    这篇“vuex怎么实现简单的购物车功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue...
    99+
    2022-10-19
  • Vue实现简单的购物车案例
    本文实例为大家分享了Vue实现简单的购物车案例的具体代码，供大家参考，具体内容如下 代码： <template> <div> <div...
    99+
    2022-11-12
  • vue如何实现简单的购物车
    今天小编给大家分享一下vue如何实现简单的购物车的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。效果图如下<templa...
    99+
    2023-07-02
  • vue实现简单的购物车小案例
    本文实例为大家分享了vue实现简单购物车的具体代码，供大家参考，具体内容如下 最近在写vue的相关项目，所以找一些小例子练习一下，把一个js的购物车改成vue了 css部分是直接引入...
    99+
    2022-11-13
  • 微信小程序实现简单的购物车功能
    本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下 实现一个购物车页面，需要哪些数据。整理下大概如下：一个购物车商品列表(carts)，列表里的单个it...
    99+
    2022-11-13
  • 微信小程序实现简单购物车小功能
    本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下 微信小程序定制好看的购物车页面，实现购物车功能，希望对您有所帮助！ 1. 应用场景2. 思路分析3....
    99+
    2022-11-13
  • 如何用vuex代码实现简单的购物车功能
    这篇“如何用vuex代码实现简单的购物车功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“...
    99+
    2022-10-19
  • Python实现购物车功能的方法分析
    本文实例讲述了Python实现购物车功能的方法。分享给大家供大家参考，具体如下： 1、程序的源代码如下： salary = input('input your salary:') if salary.i...
    99+
    2022-06-04
    购物车 功能 方法
  • Android中如何使用RecyclerView实现简单购物车功能
    这篇文章给大家分享的是有关Android中如何使用RecyclerView实现简单购物车功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下我们知道在ListView中用setTag来解决Item的复用...
    99+
    2023-06-29
  • ECSHOP购物车页面显示商品简单描述的实现方法
    最近看到有朋友有这方面的需求，就整理了一下，写出来供有同样需求的朋友备用，这里说的商品简单描述，不是商品的详细信息，而是后台编辑商品时在“其他信息”标签栏填写的那个“商品简单描述&rd...
    99+
    2022-06-12
    购物车 商品简单描述
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作