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 相关文章推荐
javascript demo 基本技巧
Dec 18 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
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
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
js Function类型
2011/12/04 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
angular2+node.js express打包部署的实战
2017/07/27 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Zabbix实现微信报警功能
2016/10/09 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
软件测试专业推荐信
2014/09/18 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
Python3接口性能测试实例代码
2021/06/20 Python