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 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
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
基于mysql的bbs设计(三)
2006/10/09 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
js 居中漂浮广告
2010/03/21 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
js实现拖拽功能
2017/03/01 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Python中logging实例讲解
2019/01/17 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
英文导游欢迎词
2014/01/11 职场文书
毕业晚会主持词
2014/03/24 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
安全保证书范文
2014/04/29 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
用JS实现飞机大战小游戏
2021/06/09 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android