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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
js电信网通双线自动选择技巧
Nov 18 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
ES6小技巧之代替lodash
Jun 07 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原创论坛
2006/10/09 PHP
php 安全过滤函数代码
2011/05/07 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
Yii2中datetime类的使用
2016/12/17 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
php提取微信账单的有效信息
2018/10/01 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
jupyter安装小结
2016/03/13 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
入党转预备思想汇报
2014/01/07 职场文书
会议开场欢迎词
2014/01/15 职场文书
项目考察欢迎辞
2014/01/17 职场文书
党员实事承诺书
2014/03/26 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
MySQL三种方式实现递归查询
2022/04/18 MySQL