Vuejs实现购物车功能


Posted in Javascript onNovember 05, 2017

开始更新前端框架Vue.JS的相关博客。

功能概述

学习了Vue.JS的一些基础知识,现在利用指令、数据绑定这些基础知识开发一个简单的购物车功能。功能要点如下:
(1)展示商品的名称、单价和数量;
(2)商品的数量可以增加和减少;
(3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变;
(4)商品可以从购物车中移除;
(5)具有选择功能,只计算选中的商品的总价。

上一张截图,如下:

Vuejs实现购物车功能

代码

代码分成三部分,分别是HTML、JS、CSS。关键的是HTML和JS。

HTML

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Vue 购物车</title>
 <script src="../js/vue.min.js"></script>
 <link href="../css/cart.css" rel="external nofollow" rel="stylesheet">
 </head>
 <body>
 <div id="app" v-cloak>
  <template v-if="list.length">
  <table>
   <thead>
   <tr>
    <th><input type="checkbox" v-on:click="swapCheck" v-model="checked"></th>
    <th>商品名称</th>
    <th>商品单价</th>
    <th>商品数量</th>
    <th>操作</th>
   </tr>   
   </thead>
   <tbody>
   <tr v-for="(item,index) in list">
    <td><input type="checkbox" v-model="selectList" :id="item.id" :value="index" name="selectList" ></td>
    <td>{{ item.name }}</td>
    <td>{{ item.price }}</td>
    <td>
    <button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
    {{ item.count }}
    <button @click="handleAdd(index)">+</button>
    </td>
    <td><button @click="handleRemove(index)">移除</button></td>
   </tr>
   </tbody>
  </table>
  <div>总价:¥ {{ totalPrice }}</div>
  </template>
  <div v-else>购物车为空!</div>
 </div>

 <script src="../js/cart.js"></script>
 </body>
</html>

JS

var app = new Vue({
 el:'#app',
 data:{
 list:[
  {
  id:1,
  name:'iPhone 8',
  price:8888,
  count:1
  },
  {
  id:2,
  name:'Huwei Mate10',
  price:6666,
  count:1
  },
  {
  id:3,
  name:'Lenovo',
  price:6588,
  count:1
  }
 ],
 selectList:[],
 checked:false
 },
 computed:{
 totalPrice:function(){
  var total = 0;
  for(var i = 0,len = this.selectList.length;i < len;i++){
  var index = this.selectList[i];
  var item = this.list[index];
  if(item){
   total += item.price * item.count;
  }
  else{
   continue;
  }

  }
  return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
 }
 },
 methods:{
 handleReduce:function(index){
  var item = this.list[index];
  if(item.count < 2){
  return;
  }
  item.count--;
 },
 handleAdd:function(index){
  var item = this.list[index];
  item.count++;
 },
 handleRemove:function(index){
  this.list.splice(index,1);
 },
 swapCheck:function(){

  var selectList = document.getElementsByName('selectList');
  var len = selectList.length;
  if(this.checked){
  for(var i = 0;i < len;i++){
   var item = selectList[i];
   item.checked = false;
  }
  this.checked = false;
  this.selectList = [];
  }
  else{
  for(i = 0;i < len;i++){
   item = selectList[i];
   if(item.checked === false){
   item.checked = true;
   this.selectList.push(selectList[i].value);
   }
  }
  this.checked = true;

  }
 }
 }
});

CSS

[v-cloak]{
 display: none;
}

table{
 border: 1px solid black;
 border-collapse: collapse;
 border-spacing: 0;
 empty-cells: show;
}

th,td{
 padding: 8px 16px;
 border:1px solid black;
 text-align: center;
}

th{
 background-color: gray;
}

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

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

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
微信小程序网络封装(简单高效)
Aug 06 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 #Javascript
vue+node+webpack环境搭建教程
Nov 05 #Javascript
JavaScript实现三级级联特效
Nov 05 #Javascript
angular中不同的组件间传值与通信的方法
Nov 04 #Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 #Javascript
JavaScript中立即执行函数实例详解
Nov 04 #Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 #Javascript
You might like
PHP也可以?成Shell Script
2006/10/09 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python日志模块logging简介
2015/04/13 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
python实现字典嵌套列表取值
2019/12/16 Python
Python ellipsis 的用法详解
2020/11/20 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
大型活动策划方案
2014/01/12 职场文书
有趣的广告词
2014/03/18 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL