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数字时钟示例分享
Apr 23 Javascript
AngularJS手动表单验证
Feb 01 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
Javascript文本框脚本实现方法解析
Oct 30 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
实例讲解php实现多线程
2019/01/27 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
英语专业学生个人求职信
2014/01/28 职场文书
小摄影师教学反思
2014/04/27 职场文书
中国梦团日活动总结
2014/07/07 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
学校捐书活动总结
2015/05/08 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
python 详解turtle画爱心代码
2022/02/15 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers