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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
vue 限制input只能输入正数的操作
Aug 05 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
基于vue实现分页效果
2017/11/06 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
Python版中国省市经纬度
2020/02/11 Python
python实现图像全景拼接
2020/03/27 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
小学数学国培感言
2014/03/10 职场文书
秋天的图画教学反思
2014/05/01 职场文书
房屋授权委托书范本
2014/10/07 职场文书
师德师风自查材料
2014/10/14 职场文书
放牛班的春天观后感
2015/06/01 职场文书
小学运动会前导词
2015/07/20 职场文书
网吧管理制度范本
2015/08/05 职场文书
高二数学教学反思
2016/02/18 职场文书
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android