Vue2 实现购物车功能(可直接使用)

这篇具有很好参考价值的文章主要介绍了Vue2 实现购物车功能(可直接使用)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue2.0实例简单购物车

页面展示效果如下:​

Vue2 实现购物车功能(可直接使用),Vue2,javascript,开发语言,ecmascript,vue.js
该购物车实现了自动计算小计、总价。

代码实现

<body>
    <div id="app">
        <div>
            <form action="">
                商品名称:<input type="text" v-model="productName" name="productName">
                商品单价:<input type="text" v-model="productPrice" name="productPrice">
                <input type="button" value="添加商品" @click="addProduct">
            </form>
        </div>
        <ul>
            <li v-for="(pro,index) in productList"  :key="index">
                商品名称: {{pro.productName}} ---------------- 商品单价: {{pro.productPrice}} 
                <button @click="addproToCart(index)">添加商品</button>
            </li>
        </ul>
        <cart :cartlist="cartList"></cart>
    </div>

    <template id="cartHtml">
        <div>
            <table border="1">
                <tr>
                    <td>商品</td>
                    <td>商品名称</td>
                    <td>商品价格</td>
                    <td>商品数量</td>
                    <td>商品价格</td>
                </tr>
                <tr v-for="(pro,index) in cartlist" :key="index">
                    <td><input type="checkbox" v-model="pro.active"></td>
                    <td>{{pro.productName}}</td>
                    <td>{{pro.productPrice}}</td>
                    <td>
                        <button @click="reduceProNum(index)">-</button>
                        {{pro.productNum}}
                        <button @click="addProNum(index)">+</button>
                    </td>
                    <td>{{pro.productPrice * pro.productNum}}</td>
                </tr>
                <tr>
                    <td colspan="3">选中的商品:{{activeNum}}/{{cartlist.length}}</td>
                    <td colspan="2">商品总价:{{totalprice}}</td>
                </tr>
            </table>
        </div>
    </template>    
</body>

js代码

    var cart = {
        template:'#cartHtml',
        props:['cartlist'],
        methods:{
            // 商品数量+1
            addProNum(index){
                let product = this.cartlist[index];
                product.productNum++
            },
            // 商品数量-1
            reduceProNum(index){
                let product = this.cartlist[index];
                // 判断商品数量是否为1
                if(product.productNum==1){
                    this.cartlist.splice(index,1) // 为1,从数组中删除
                }else{
                    product.productNum--
                }
            }
        },
        computed:{
            activeNum(){
                let activeProdctList = this.cartlist.filter(item=>{
                    return item.active
                })
                return activeProdctList.length
            },
            totalprice(){
                let result = 0;
                for(pro of this.cartlist){
                    if(pro.active){
                        result = result + pro.productPrice * pro.productNum
                    }
                }
                return result;
            }
        }
    }

    var app = new Vue({
        el:'#app',
        data(){
            return{
                productName:'',
                productPrice:0,
                productList:[],
                cartList:[]
            }
        },
        methods:{
            addProduct(){
                // todo 对新增的商品名称和单价,进行验证

                // 查找新增的商品是否存在于商品列表中,如果不在存在返回-1
                let findindex = this.productList.findIndex(item=>{
                    return item.productName==this.productName
                })
                if(findindex==-1){ // 判断商品列表中是否存在新增商品
                    // 把新商品添加到商品列表中
                    this.productList.push({productName:this.productName,productPrice:this.productPrice})
                }else{
                    alert('此商品已经存在') // 商品已存在,给出提示
                }
            },
            // 添加商品到购物车,index是单击商品的下标
            addproToCart(index){
                
                let newproduct = this.productList[index]; // 根据下标从商品列表中取出商品对象
                // 从购物车列表中查找,是否存在新的商品,如果查到返回购物车中的商品
                let product = this.cartList.find(item=>{
                    return item.productName==newproduct.productName
                })
                if(product){
                    // 如果有对应商品数量加1
                    product.productNum++
                }else{
                    // 没有对应商品,添加新的商品到购物车
                    this.cartList.push({
                        productName:newproduct.productName,
                        productPrice:newproduct.productPrice,
                        productNum:1,
                        active:true
                    });
                }
                
                console.log(product);
            }
        },
        components:{
            cart
        }
    })

欢迎大家有问题指出文章来源地址https://www.toymoban.com/news/detail-653368.html

到了这里,关于Vue2 实现购物车功能(可直接使用)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用Session和cookie会话对象实现简单购物车功能(超详细)

    1.新建Dynamic Web project,新建过程如下; 2.在src目录下新建两个包,一个命名为entity,一个命名为servlet,新建过程如下; 3.在entity目录下新建两个实体类,一个名为Cake,一个名为CakeDB,新建过程如下: 4.在servlet目录下新建三个servlet,命名分别为ListCakeServlet、PurchaseServlet和CartSe

    2023年04月17日
    浏览(72)
  • javaweb实现购物车功能

    使用到的相关知识(部分知识点在文章中简单涉及到):        html  cs  javascript  jsp  servlet   ajax  jQuery  Mysql  MyBatis(持久层框架,用来连接数据库,这里可以使用jdbc进行数据库的连接)  功能使用MVC设计模式,以及三层架构思想 注: 本篇使用 Session 对购物车进行存储,具体参

    2023年04月21日
    浏览(38)
  • 使用Vue.js框架的指令和事件绑定实现一个购物车的页面布局

    使用了v-model指令来实现全选/全不选的功能,当全选框被点击时,isAllChecked的值会被改变。 使用了v-if指令来判断购物车中是否有商品,如果有商品则渲染商品列表,否则显示购物车为空的提示。 使用了v-for指令来遍历datalist数组,渲染每个商品项。 使用了@change事件来监听商

    2024年02月12日
    浏览(53)
  • 实现蛋糕商城购物车功能代码实现实验报告

    一、实验目的 1、熟悉HttpSession接口中常用方法 2、熟悉Session 对象的生命周期 3、熟悉两种方法返回与当前请求相关的HttpSession对象。 4、学会如何使用Session 技术模拟用户登录的功能 二、实验内容 实现购物车 1、在chapler05 项目下新建一个名称为 cn.itcast.session.entity 的包,在该

    2024年02月09日
    浏览(45)
  • 苍穹外卖day07——缓存菜品套餐+购物车功能实现

    用户访问量过大带来的一个直接效果就是响应速度慢,使用体验下降。 使用redis缓存菜品数据,减少数据库查询操作。  页面展示上基本就是同一个分类在同一页,所以key-value结构可以使用不同的分类来做key。 在小程序每一次点击不同的分类,后端哪里都会刷刷刷的连接数据

    2024年02月14日
    浏览(67)
  • Android RecyclerView实现购物车功能(完善详解篇-保姆级教程)

    购物车实现图片: 首先新建model 随便一个名字 ,例如ShoppingCart 功能一: RecyclerView布局的实现 ①创建MainActivity ②在MainActivity布局中添加RecyclerView组件 ◼ 布局位置在layout中如图位置: recyclerview如图中间部分: (注:其他布局可自己通过拖动组件实现) ◼ activity_main.xml的布局

    2024年02月04日
    浏览(111)
  • 【uniapp 开发小程序】购物车功能,实现全选、反选、单选、计算总价

    uniapp 开发小程序,实现购物车功能,实现全选、反选、单选、计算总价 关键代码: return totalPrice.toFixed(2); // 保留两位小数 否则会出现多位小数现象:

    2024年02月11日
    浏览(35)
  • 使用JavaScript实现动态生成并管理购物车的深入解析

    在当前的互联网时代,电子商务已成为我们日常生活的重要组成部分。购物车作为电子商务网站的核心功能之一,其实现方式对于用户体验至关重要。本文将深入探讨如何使用JavaScript实现一个动态生成并管理购物车的功能,并详细介绍其实现细节,同时附上相关代码。 购物

    2024年01月24日
    浏览(88)
  • 【业务功能篇97】微服务-springcloud-springboot-电商购物车模块-获取当前登录用户的购物车信息

      我们需要先创建一个cart的微服务,然后添加相关的依赖,设置配置,放开注解。 然后属性文件中的配置 然后再添加配置中心的配置:bootstrap.yml文件 放开注册中心的注解   首先在windows中的host指定对应域名 拷贝对应的静态资源到Nginx的static/cart目录中 然后修改Nginx的配

    2024年02月09日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包