Vuejs实现购物车功能

最新推荐文章于 2024-03-15 09:49:49 发布
最新推荐文章于 2024-03-15 09:49:49 发布
阅读量2.3k 收藏 12
点赞数 1
分类专栏： vue

开始更新前端框架Vue.JS的相关博客。

功能概述

学习了Vue.JS的一些基础知识，现在利用指令、数据绑定这些基础知识开发一个简单的购物车功能。功能要点如下：
（1）展示商品的名称、单价和数量；
（2）商品的数量可以增加和减少；
（3）购物车的总价要实时更新，即数量发生变动，总价也要相应的改变；
（4）商品可以从购物车中移除；
（5）具有选择功能，只计算选中的商品的总价。

上一张截图，如下：

代码

代码分成三部分，分别是HTML、JS、CSS。关键的是HTML和JS。

HTML

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
< html >
  < head >
   < meta charset = "utf-8" >
   < title >Vue 购物车</ title >
   < script src = "../js/vue.min.js" ></ script >
   < link href = "../css/cart.css" rel = "external nofollow" rel = "stylesheet" >
  </ head >
  < body >
   < div id = "app" v-cloak>
    < template v-if = "list.length" >
     < table >
      < thead >
       < tr >
        < th >< input type = "checkbox" v-on:click = "swapCheck" v-model = "checked" ></ th >
        < th >商品名称</ th >
        < th >商品单价</ th >
        < th >商品数量</ th >
        < th >操作</ th >
       </ tr >      
      </ thead >
      < tbody >
       < tr v-for = "(item,index) in list" >
        < td >< input type = "checkbox" v-model = "selectList" :id = "item.id" :value = "index" name = "selectList" ></ td >
        < td >{{ item.name }}</ td >
        < td >{{ item.price }}</ td >
        < td >
         < button @ click = "handleReduce(index)" :disabled = "item.count === 1" >-</ button >
         {{ item.count }}
         < button @ click = "handleAdd(index)" >+</ button >
        </ td >
        < td >< button @ click = "handleRemove(index)" >移除</ button ></ td >
       </ tr >
      </ tbody >
     </ table >
     < div >总价：￥ {{ totalPrice }}</ div >
    </ template >
    < div v-else>购物车为空！</ div >
   </ div >
  
   < script src = "../js/cart.js" ></ script >
  </ body >
</ html >

JS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
var app = new Vue({
  el: '#app' ,
  data:{
   list:[
    {
     id:1,
     name: 'iPhone 8' ,
     price:8888,
     count:1
    },
    {
     id:2,
     name: 'Huwei Mate10' ,
     price:6666,
     count:1
    },
    {
     id:3,
     name: 'Lenovo' ,
     price:6588,
     count:1
    }
   ],
   selectList:[],
   checked: false
  },
  computed:{
   totalPrice: function (){
    var total = 0;
    for ( var i = 0,len = this .selectList.length;i < len;i++){
     var index = this .selectList[i];
     var item = this .list[index];
     if (item){
      total += item.price * item.count;
     }
     else {
      continue ;
     }
  
    }
    return total.toString().replace(/\B(?=(\d{3})+$)/g, ',' );
   }
  },
  methods:{
   handleReduce: function (index){
    var item = this .list[index];
    if (item.count < 2){
     return ;
    }
    item.count--;
   },
   handleAdd: function (index){
    var item = this .list[index];
    item.count++;
   },
   handleRemove: function (index){
    this .list.splice(index,1);
   },
   swapCheck: function (){
  
    var selectList = document.getElementsByName( 'selectList' );
    var len = selectList.length;
    if ( this .checked){
     for ( var i = 0;i < len;i++){
      var item = selectList[i];
      item.checked = false ;
     }
     this .checked = false ;
     this .selectList = [];
    }
    else {
     for (i = 0;i < len;i++){
      item = selectList[i];
      if (item.checked === false ){
       item.checked = true ;
       this .selectList.push(selectList[i].value);
      }
     }
     this .checked = true ;
  
    }
   }
  }
});

CSS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[v-cloak]{
  display : none ;
}
  
table{
  border : 1px solid black ;
  border-collapse : collapse ;
  border-spacing : 0 ;
  empty-cells : show ;
}
  
th,td{
  padding : 8px 16px ;
  border : 1px solid black ;
  text-align : center ;
}
  
th{
  background-color : gray ;
}

关于vue.js的学习教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

wandoumm
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue.js实现简单购物车功能
11-20
本文实例为大家分享了vue.js实现简单购物车的具体代码，供大家参考，具体内容如下 这次我将给大家带来一个vue.js实现购物车的小项目，如有不足请严厉指出。 购物车功能有：全选和选择部分商品，选中商品总价计算，商品移除，以及调整购买数量等功能。 js主要有以下方法 加函数，减函数，手动修改数量判断库存函数，总价格计算函数，单选事件，全选事件，一共分为6个事件 具体效果如下图 代码在这里 main.js 'use strict' var app = new Vue({ el: '#app', data: { list: [ { id: 1, name: 'iPhone
vue.js实现简单购物车
maidu_xbd的博客
01-23 232
简单购物车功能介绍 （1）显示商品名称，价格，选购数量； （2）实现商品的数量增加、减少和清空； （3）实时显示选购的所有商品的总价。 知识点介绍 （1）循环语句:v-for指令 &lt;tr v-for="good in goods"&gt; &lt;td&gt;{{good.id}}&lt;/td&gt; &lt;td&gt;{{good.name}}&lt;/t...
Vue.js实现购物车功能
m0_46211448的博客
12-24 2754
Vue.js实现购物车功能 1.功能实现 以表格的形式将存放在后端的购物信息展示在前端页面，实现步骤如下： 使用axios技术异步读取json文件里的数据，结合Vue.js的v-for指令将信息逐条迭代存放在表格中，在表格中展示“商品名称”、“商品单价”、“商品数量”等信息，并能对商品进行数量的增加、减少，清除此项订单信息的功能，订单总价随着商品数量的增加和减少实时更新。 2.order.json数据如下 [ { id:1, name:'华为Mate40',
Vue多文件学习项目综合案例——购物车，黑马vue教程
质量不太好的博客
03-15 686
Vue多文件学习项目综合案例——购物车，黑马vue教程
vue实现购物车简单功能
weixin_45815557的博客
05-10 7226
1、写商品信息数据 2、点击加入购物车按钮，将数据加入到购物车内部（此处购物车与商品信息写在同一个页面内） 添加按钮 添加按钮的方法 <script> export default{ methods:{ //点击添加按钮，将数据添加到购物车(即空数组baskets)中去，并对数量就行添加 addFood(row){ let boo = false; let index = 0; //index是如果存在这个产品
vue.js实现简单的购物车功能
junhaogz215的博客
01-31 5666
咳咳，第一次写博客，有点小紧张，这次我将给大家带来一个vue.js实现购物车的小项目，如有不足请严厉指出。 购物车功能有：全选和选择部分商品，选中商品总价计算，商品移除，以及调整购买数量等功能。 js 主要有以下方法 加函数，减函数，手动修改数量判断库存函数，总价格计算函数，单选事件，全选事件，一共分为6个事件 具体效果如下图 代码在这里 main.j
说说如何使用 Vue.js 开发购物车功能
weixin_34234721的博客
11-24 167
购物车一般包含商品名称、单价、数量等信息，数量可以任意新增或减少，商品项也可删除，还可以支持全选或多选： 我们把这个小项目分为三个文件： index.html （页面） index.js （Vue 脚本） style.css （样式） 1 index.js 首先在 js 中初始化 Vue 实例，整体模板如下： var app = new Vue({ el: '#app', ...
Vue.js之简单购物车的实现
weixin_44827643的博客
07-22 4231
该组件作为父组件，内部又划分为三个组件，分别为cart-title、cart-list、cart-total，对应购物车的标题、列表以及总价区域。为两个按钮绑定点击事件，为输入框绑定失去焦点事件。在父组件中定义list数据，通过props传给总价组件，在计算属性中利用reduce方法得出总价。在父组件中定义uname数据，通过props属性传给标题组件。商品列表组件功能的实现是购物车最重要的部分，相对来说功能较复杂。划分完成后，则将静态布局的代码放置到对应组件的模板中。在父组件中绑定自定义的监听事件。...
用vue.js实现购物车功能
weixin_30662539的博客
05-24 295
购物车是电商必备的功能，可以让用户一次性购买多个商品，常见的购物车实现方式有如下几种： 1. 用户更新购物车里的商品后，页面自动刷新。 2. 使用局部刷新功能，服务器端返回整个购物车的页面html 3. 服务器端返回JSON格式，使用模板引擎+dom操作更新页面 最近新学习了vue.js，一个轻量级的mvvm（Model-View-ViewModel），vue.js是数据驱动无须操作dom...
使用 （Vue.js）实现 购物车功能（包含全选、分类、删除）
weixin_43748615的博客
02-14 1780
在当前示例的基础上扩展商品列表，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价 同时提供一个全选的按钮。 思路： 添加input元素，为其属性checked赋予动态变量，变量可在商品属性中增加一个值加以判断. 通过判断checked属性的值，确定是否添加计算到总价. 全选：也是通过添加input元素和判断checked属性，不同的是，增加其与物品的联系。 全选思考：首先是点击全选本身...
用vue实现购物车小功能
weixin_55229531的博客
04-20 5569
用vue实现购物车小功能
基于Vuejs实现购物车功能
10-21
主要为大家详细介绍了基于Vuejs实现购物车功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue.js实现购物车结算统计和移除功能.zip
01-27
通过vue.js实现一个简单的购物车统计结算和移除效果
2021数学建模美赛C题代码.zip
04-24
最全的数学建模美赛C题和代码、大量刷题题库、逻辑清晰易于学习
这是一个保存Springboot+MyBaits项目的仓库.zip
最新发布
04-24
springboot框架 一、Spring Boot基础应用 Spring Boot特征 概念： 约定优于配置，简单来说就是你所期待的配置与约定的配置一致，那么就可以不做任何配置，约定不符合期待时才需要对约定进行替换配置。 特征： 1. SpringBoot Starter：他将常用的依赖分组进行了整合，将其合并到一个依赖中，这样就可以一次性添加到项目的Maven或Gradle构建中。 2,使编码变得简单，SpringBoot采用 JavaConfig的方式对Spring进行配置，并且提供了大量的注解，极大的提高了工作效率，比如@Configuration和@bean注解结合，基于@Configuration完成类扫描，基于@bean注解把返回值注入IOC容器。 3.自动配置：SpringBoot的自动配置特性利用了Spring对条件化配置的支持，合理地推测应用所需的bean并自动化配置他们。 4.使部署变得简单，SpringBoot内置了三种Servlet容器，Tomcat，Jetty,undertow.我们只需要一个Java的运行环境就可以跑SpringBoot的项目了
课设&大作业-毕业设计精品课程网站，采用的技术是 SSM 框架和 Shiro.zip
04-24
【资源说明】【毕业设计】 1、该资源内项目代码都是经过测试运行成功，功能正常的情况下才上传的，请放心下载使用。 2、适用人群：主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、数学、电子信息等)的同学或企业员工下载使用，具有较高的学习借鉴价值。 3、不仅适合小白学习实战练习，也可作为大作业、课程设计、毕设项目、初期项目立项演示等，欢迎下载，互相学习，共同进步！
c#做的综合上位机，服务于freescale智能车&电子设计.zip
04-24
c#做的综合上位机，服务于freescale智能车&电子设计.zip
tensorflow-gpu-2.7.2-cp39-cp39-manylinux2010-x86-64.whl
04-24
bert
vuejs用computed怎么实现购物车满减功能
06-12
在Vue.js中使用computed可以方便地实现购物车的满减功能。假设你的购物车数据保存在一个数组中，每个元素包含商品的名称、价格和数量等信息。你可以定义一个computed属性来计算购物车的总价，并在其中实现满减逻辑。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值