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 相关文章推荐
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
PHP抽象类 介绍
2012/06/13 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
35个Python编程小技巧
2014/04/01 Python
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python多线程下载文件的方法
2015/07/10 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
学院书画协会部门岗位职责
2013/12/01 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
寒假致家长的一封信
2015/10/10 职场文书
检讨书怎么写?
2019/06/21 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js