如何使用vue实现一个简易的购物车

最新推荐文章于 2024-06-06 10:02:37 发布
最新推荐文章于 2024-06-06 10:02:37 发布
阅读量7.5k 收藏 9
点赞数 8
分类专栏： vue 文章标签： vue-js 购物车
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zbwroom/article/details/77502851
版权

先看效果图
这里写图片描述

直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css"/>
</head>
<body>

    <div id="app" class="container">
        <table class="table">
            <thead>
                <tr>
                    <th>产品编号</th>
                    <th>产品名字</th>
                    <th>购买数量</th>
                    <th>产品单价</th>
                    <th>产品总价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item , index) in message">
                    <td @click="jia(index)">{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <button type="button" class="btn tn-primary" @click="subtract(index)">-</button>
                        <input type="text" v-model="item.quantity">
                        <button type="button" class="btn tn-primary" @click="add(index)">+</button>
                    </td>
                    <td>{{item.price | filtermoney}}</td>
                    <!--<td>{{arr[index].one}}</td>-->
                    <td>{{item.price*item.quantity | filtermoney}}</td>
                    <td>
                        <button type="button" class="btn btn-danger" @click="remove(index)">移除</button>
                    </td>
                </tr>
                <tr>
                    <td>总购买价            
                    </td>
                    <td>
                        {{animatenum | filtermoney}}
                    </td>
                    <td>总购买数量
                    </td>
                    <td>

                    </td>
                    <td colspan="2">
                        <button type="button" class="btn btn-danger" @click="empty()">清空购物车</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <p v-if="message.length===0">您的购物车为空</p>
    </div>
    <script src="https://unpkg.com/tween.js@16.3.4"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.3/vue.min.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                totalPrice:0,
                animatenum:0,
                message:[
                    {
                        id: 007,
                        name: 'iphone5s',
                        quantity: 3,
                        price: 4000
                   },{
                        id: 1340,
                        name: 'iphone5',
                        quantity: 9,
                        price: 3000
                   },{
                        id: 7758,
                        name: 'imac',
                        quantity: 4,
                        price: 7000
                   },{
                        id: 2017,
                        name: 'ipad',
                        quantity: 5,
                        price: 6000
                    }
                ]
            },
            watch:{
                toComput2:function(newValue,oldValue){
                    this.tween(newValue,oldValue);
                }
            },
            computed:{
                //计算总金额
                toComput2:function(){
                    var vm=this;
                    //每次进来要重置总金额
                    vm.totalPrice=0;
                    this.message.forEach(function(mess){
                        vm.totalPrice+=parseInt(mess.price*mess.quantity);
                    })
                    return this.totalPrice;
                }
            },
            filters:{
                filtermoney:function(value){
                    return '￥'+value ;
                }
            },
            mounted:function(){ 
                this.tween('97000','0');
            },
            methods:{
                //计算总数的方法为什么写在methods里面就不行？
                toComput:function(){
                    var vm=this;
                    vm.message.forEach(function(mess){
                        vm.totalPrice+=parseInt(mess.price*mess.quantity);
                    })
                    return vm.totalPrice;
                },
                add:function(index){
                    var vm=this;
                    vm.message[index].quantity++;
                },
                subtract:function(index){
                    var vm=this;
                    vm.message[index].quantity--;
                    if(vm.message[index].quantity<=0){
                        if (confirm("你确定移除该商品？")) {  
                            vm.message.splice(index,1)
                        } 
                    }

                },
                remove:function(index){
                    var vm=this;
                    if (confirm("你确定移除该商品？")) {  
                        vm.message.splice(index,1)
                    }  
                },
                empty:function(){
                    var vm=this;
                    vm.message.splice(0,vm.message.length);
                },
                jia:function(index){
                    var vm=this;
                    vm.arr[index].one++;
                },
                tween:function(newValue,oldValue){
                    var vm=this;
                    var twen=new TWEEN.Tween({animatenum:oldValue});
                    function animate() {
                        requestAnimationFrame(animate);         
                        TWEEN.update(); 
                    };
                    twen.to({animatenum:newValue},750);
                    twen.onUpdate(function(){
                    //toFixed();保留几位小数
                        vm.animatenum = this.animatenum.toFixed();
                    })
                    twen.start();
                    animate();
                }
            }
        });


    </script>   

</body>
</html>
zbwroom
关注
  • 8
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Vue实现简易购物车功能
YY的博客
11-22 8564
Vue实现简易购物车功能
Vuex状态管理【案例】：购物车2023.05.19上
m0_65065082的博客
05-19 809
或 npm config set registry https://registry.npmmirror.com。1. 安装node10 :node-v10.24.1-x64.msi，查看是否安装成功。2. 在F盘创建文件夹demo,cmd进入命令行窗口，cd命令进入指定目录。安装webpack@4.27 webpack-cli@3。进入shopcart目录，安装vuex。将图片资源复制到static目录下。回车回车回车.....
使用Vuex实现购物车
最新发布
ch_s_t的专栏
06-06 523
使用时，需要将商品列表组件Product.vue和购物车列表组件Cart.vue在App.vue中引入，并在Vuex的store文件夹下的cart.js中定义好商品数据 all_products和已添加到购物车的商品数据selected，然后将该模块放入index.js文件的modules对象中，将数据通过getters导出，将方法通过actions和mutations导出。当进行一些小项目开发时，涉及组件传值时，或者项目非常小，组件间共享状态不多的情况下，此时可以使用简单的store模式或者其它方式。
vue组件创建购物车列表
桃桃雾的博客
09-05 538
vue组件创建购物车列表
vue2实现购物车静态案例
weixin_45914112的博客
11-08 526
【代码】vue2实现购物车静态案例。
Vue全家桶(vue-router+vuex)
06-17
Vue是-个渐进式JavaScript框架，主要用于构建用户界面。它可以轻松创建功能强大的单页面应用程序，并在创建Web应用程序的视图层时实现其基本用途。Vue、React、 angular可以说是当今前端中三足鼎立的三大框架，而Vue社区的发 展已经慢慢赶超angular以及React。Vue的优点是API齐全、灵活性高、极易. 上手、插件集成,在前端框架学习中,无疑Vue是第一选择。本课程基于ES6来学习Vue的整个API，其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之vue-router和vuex、基于权限控制实现登录注册、前端路由原理、为什么要用vuex、单页应用和多页应用的区别、以及项目实战:购物车项目。通过学完本课程，你可以独立开发任何一款单页应用程序项目。
vue.js实现简单购物车功能
11-20
在本示例中，我们将探讨如何使用Vue.js来实现一个简单的购物车功能。Vue.js是一个流行的前端JavaScript框架，它提供了一种声明式的数据绑定和组件化的方法，使得构建用户界面更加简便。在这个小项目中，我们将实现...
vue实现商城购物车功能
12-29
本文实例为大家分享了vue实现商城购物车功能的具体代码，供大家参考，具体内容如下 首先，先上最终的效果图 效果并不是很好看，但是这不是重点。 首先，我们先看下布局： 购物车 (item,index)> ...
用vue和node写的简易购物车实现
08-30
本项目是一个使用Vue和Node实现的简易购物车，前端使用Vue框架，后端使用Node.js接收前端请求并进行数据操作。该项目主要实现了三个小功能：展示商品列表、把商品加入购物车、从购物车删除商品。 二、搭建本地环境 ...
Vue实现购物车功能
12-29
效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <link rel=stylesheet href=... <tr>
vue实现购物车小案例
12-13
- Vue 提供了一个安全的方式来操作 DOM，避免了直接操作 DOM 带来的性能问题和复杂性，例如，使用 `v-if` 或 `v-show` 控制元素的显示和隐藏。 总的来说，这个购物车案例展示了 Vue.js 如何结合 HTML、CSS 和 ...
基于vue2vuex2实现的购物车demo
08-10
这是用vuex2实现的一个商城购物车demo,存储数据用的本地localstorage
关于慕课网《使用vue2.0实现购物车和地址选配功能》的总结
兰亭古墨
07-26 4385
视频学习网址：http://www.imooc.com/learn/796 源码打包：https://codeload.github.com/fachaoshao/Vue-ShoppingCart/zip/master（before为老师未写功能的源码，after为实现功能后的源码）； 注意：以上源码请在 Apache 打开状态打开浏览； 该教程在功能上实现了： 1）将  .json文件数
vue小项目（二）—— 购物车的完整实现
热门推荐
以沫wh的博客
10-18 1万+
购物车的完整实现1需要提前了解的基础知识2目录部署3效果 1需要提前了解的基础知识 本项目完全使用的是前端开发，没有使用到服务器，（前端开发的小伙伴可以放心看），前端使用到： vue, vue-cli, vuex, vue-router, axios，ES6，ES Module等技术 2目录部署 最终实现目录 2 public目录 因为本项目没有使用到服务器，我们这里将数据放在本地，方便获取，list.json是待会页面需要获取的json文件，static/img/list下的是图片资源（也可以放在
Vue 购物车实例
高亮博客
06-08 285
刚开始学习Vue,个人感觉Vue和Jquery最大的区别是Vue由数据驱动，封装了DOM操作。 贴上写的购物车小实例 Html 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="...
使用Vue实现简单购物车
qq_26597143的博客
06-24 5519
实战：购物车 新手程序员最容易犯的错误就是拿到需求不管三七二十一，直接开搞。在开始写代码之前，理清思路，分析需求是十分重要的，一来可以提高书写代码的效率，二来可以避免错误带来的返工。 现在来看下购物车都需要实现哪些功能： 可以展示商品列表，每一条商品记录包含商品名称、商品单价、购买数量和操作。 可以对每个商品的数量进行增加和减少 可以删除商品 可以对商品的总价进行计算。 效果如下： 好，整理完需求之后，我们就可以着手写代码了。 首先咱们先把整体的HTML结构搭建出来，毕竟HTML是网页的骨架，没有骨架
【VUE】vue入门之实现简易的购物车组件
吴纯玲的博客
07-05 3047
vue初学者 由于之前用惯了angular了，所以学起vue来还是比较得心应手的，昨天大概看了一遍vue的API文档，今天用vue实现一个简易的购物车组件 先上仓库地址https://gitee.com/wuchunling/shoppingCart.git 先看效果图 1.全局安装vue-cli命令行工具 npm install vue-cli --g 2.用vue命令行初始化项...
笔记~vue2实现的购物车（未完待续）
大小都是愁的成长之路
03-05 875
.准备前的工作1.导入vue文件.直接官网下载.npm（npm更多可能链接到国外，建议使用cnpm（淘宝团队提供的径向））2、任何前端项目要先初始化一个package文件，npm init；安装依赖的插件3、一个完整的vue实例.可借鉴小思路.方法说明/差别说明1.vue2中拿到索引的方法（vue1直接通过$index就可以引用）2.vue2的生命周期mounted函数不能保证实例已插入文档，所以...
用vue框架实现一个购物车页面
03-31
由于我是AI语言模型，无法直接实现代码，以下是用Vue框架实现购物车页面的一些指导： 1. 首先，需要创建一个Vue实例。可以通过Vue CLI或手动引入Vue库来创建。 2. 创建一个包含购物车商品信息的数组。每个商品应该包括名称、价格、数量和图片等信息。 3. 在Vue实例中定义一个data属性，将创建的购物车商品数组赋值给它。例如： ``` data: { cartItems: [ { name: '商品1', price: 10, quantity: 2, image: 'image1.jpg' }, { name: '商品2', price: 20, quantity: 1, image: 'image2.jpg' }, { name: '商品3', price: 30, quantity: 3, image: 'image3.jpg' }, ] } ``` 4. 在Vue模板中使用v-for指令循环渲染购物车商品列表。例如： ``` <div v-for="item in cartItems" :key="item.name"> <img :src="item.image"> <h3>{{ item.name }}</h3> <p>单价：{{ item.price }}元</p> <p>数量：{{ item.quantity }}</p> <p>小计：{{ item.price * item.quantity }}元</p> </div> ``` 5. 添加购物车商品数量的增减功能。可以使用v-model指令绑定商品数量的值，然后通过方法实现增减功能。例如： ``` <div v-for="item in cartItems" :key="item.name"> ... <button @click="decreaseQuantity(item)">-</button> <input type="number" v-model="item.quantity"> <button @click="increaseQuantity(item)">+</button> ... </div> methods: { increaseQuantity(item) { item.quantity++; }, decreaseQuantity(item) { if (item.quantity > 1) { item.quantity--; } } } ``` 6. 添加总价和结算功能。可以通过计算属性计算购物车商品的总价，并在模板中显示。然后添加一个结算按钮，点击后触发一个方法，弹出提示框或跳转到结算页面。例如： ``` <div> ... <p>总价：{{ totalPrice }}元</p> <button @click="checkout">结算</button> </div> computed: { totalPrice() { return this.cartItems.reduce((total, item) => { return total + item.price * item.quantity; }, 0); } }, methods: { checkout() { // 弹出提示框或跳转到结算页面 } } ``` 以上是用Vue框架实现购物车页面的基本步骤和代码示例。具体实现可能会因需求和实际情况有所不同。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值