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 获取页面元素的位置的代码
Sep 25 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python subprocess模块常见用法分析
2018/06/12 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
什么是java序列化,如何实现java序列化
2012/11/14 面试题
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
师德自我剖析材料范文
2014/10/06 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
师德师风个人总结
2015/02/06 职场文书
2015年政教主任工作总结
2015/07/23 职场文书