vue.js实现简单购物车功能


Posted in Javascript onMay 30, 2020

本文实例为大家分享了vue.js实现简单购物车的具体代码,供大家参考,具体内容如下

这次我将给大家带来一个vue.js实现购物车的小项目,如有不足请严厉指出。

购物车功能有:全选和选择部分商品,选中商品总价计算,商品移除,以及调整购买数量等功能。

js主要有以下方法

加函数,减函数,手动修改数量判断库存函数,总价格计算函数,单选事件,全选事件,一共分为6个事件

具体效果如下图

vue.js实现简单购物车功能

代码在这里

main.js

'use strict'
 
var app = new Vue({
 el: '#app',
 data: {
 list: [
  {
  id: 1,
  name: 'iPhone 7',
  price: 6188,
  count: 1,
  check: true,
  },
  {
  id: 2,
  name: 'iPad Pro',
  price: 5888,
  count: 1,
  check: false,
  },
  {
  id: 3,
  name: 'MacBook Pro',
  price: 21488,
  count: 1,
  check: true,
  },
 ]
 },
 methods: {
 remove: function (index) { //移除商品
  this.list.splice(index, 1);
 },
 reduce: function (index) { //减少商品
  this.list[index].count --;
 },
 add: function (index) { //增加商品
  this.list[index].count ++;
 },
 selAll: function () { //商品全选
  let isAll = document.querySelector('#all');
 
  if (isAll.checked == true) {
  this.list.forEach(function(item, index) {
   item.check = true;
  }) 
  } else {
  this.list.forEach(function(item, index) {
   item.check = false;
  }) 
  }
 }
 },
 computed: {
 totalPrices: function () { //计算总价
  let totalPrices = 0;
 
  this.list.forEach(function (val, index) {
  if (val.check == true)
   totalPrices += parseFloat(val.price * val.count);
  })
 
  return totalPrices.toString().replace(/\B(?=(\d{3})+$)/g, ','); //每三位数中间加一个‘,'
 }
 }
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" href="main.css" >
</head>
<body>
<div id="app" v-cloak>
 <template v-if="list.length">
 <table>
  <thead>
  <tr>
   <th>全选<input id="all" @click="selAll" type="checkbox" checked></th>
   <th>商品名称</th>
   <th>商品单价</th>
   <th>购买数量</th>
   <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <template v-for="(item, index) in list">
   <tr>
   <td>
    <input type="checkbox" :checked="item.check" @click="item.check = !item.check">
   </td>
   <td>
    {{ item.name }}
   </td>
   <td>
    {{ item.price }}
   </td>
   <td>
    <button @click="reduce(index)" :disabled="item.count == 1">-</button>
    {{ item.count }}
    <button @click="add(index)">+</button>    
   </td>
   <td>
    <button @click="remove(index)">移除</button>
   </td>
   </tr>
  </template>
  </tbody>
 </table>
 <div>总价: ¥ {{ totalPrices }}</div>
 </template>
 <template v-else>
 购物车没有商品
 </template>
</div>
 
<script src="vue.js"></script>
<script src="main.js"></script>
</body>
</html>

main.css

[v-cloak] {
 display: none; 
}
 
#app {
 width: 500px;
 margin: 0 auto;
}
 
table {
 width: 100%;
 border: 1px solid #444;
 border-collapse: collapse;
}
 
th, td {
 padding: 8px 16px;
 border: 1px solid #444;
 text-align: left;
}
 
th {
 background: #89abd3;
 color: rgb(214, 224, 235);
 font-weight: 600;
 white-space: nowrap;
}

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
vue实现简单学生信息管理
May 30 #Javascript
vue实现学生信息管理系统
May 30 #Javascript
vue实现在线学生录入系统
May 30 #Javascript
VueJS实现用户管理系统
May 29 #Javascript
如何在vue中使用jointjs过程解析
May 29 #Javascript
vue实现信息管理系统
May 30 #Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 #Javascript
You might like
ASP知识讲座四
2006/10/09 PHP
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python实现XML解析的方法解析
2019/11/16 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
运动会跳远加油稿
2014/02/20 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
新手上路标语
2014/06/20 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
婚宴父亲致辞
2015/07/27 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript