Vue实现本地购物车功能


Posted in Javascript onDecember 05, 2018

本文实例为大家分享了Vue实现本地购物车功能的具体代码,供大家参考,具体内容如下

功能分析 : v-for显示商品名字,价格,数量和对商品进行操作,全选的功能
结构仍然分成 : index.html , index.js , style.css

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>购物车实例</title>
 <link rel="stylesheet" href="style.css" >
</head>
<body>
 <div id="app" v-cloak>
 <template v-if="list.length">
 <table>
 <thead>
 <tr>
 <th><input type="checkbox" @click='checkAll' :checked='allCheck'></th>
 <th>序号</th>
 <th>商品名称</th>
 <th>商品单价</th> 
 <th>购买数量</th> 
 <th>操作</th> 
 </tr>
 </thead>
 <tbody>
 <tr v-for="(item,index) in list">
 <td><input type="checkbox" :checked='item.isChecked' @click="singleCheck(index)"></td>
 <td>{{index + 1}}</td>
 <td>{{item.name}}</td>
 <td>{{item.price}}</td>
 <td>
 <button @click="handleReduce(index)" :disable="item.count === 1 ">-</button>
 {{item.count}}
 <button @click="handleAdd(index)">+</button>
 </td>
 <td>
 <button @click="handleRemove">移除</button>
 </td>
 </tr>
 </tbody>
 </table>
 <div>总价 : ¥{{totalPrice}}</div>
 </template>
 <div v-else>购物车为空</div>

 </div>
</body>
<!-- 通过cdn引入-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</html>

index.js

const app = new Vue({
 el : '#app',
 data : {
 allCheck:false,
 list : [
 {
 id: 1 ,
 name :'iPhone 8 ',
 price: 6188 ,
 count: 1 ,
 isChecked : false
 },
 {
 id: 2 ,
 name :'小米 8 ',
 price: 5888 ,
 count: 1 ,
 isChecked : false
 },
 {
 id: 3 ,
 name :'iPad Pro ',
 price: 11000 ,
 count: 1 ,
 isChecked : false
 },
 {
 id: 4 ,
 name :'雷神SE9',
 price: 6188 ,
 count: 10 ,
 isChecked : false
 },
 ]
 },
 computed : {
 //通过计算属性获取总价格
 totalPrice:function() {
 let total = 0;
 const newArr = this.list.filter(value => {
 return value.isChecked == true
 })
 for(var i = 0 ;i<newArr.length;i++) {
 total += this.list[i].price * this.list[i].count
 }
 //返回一个符合千分位格式的金额数
 //return total.toString().replace(/\B(?=(\d{3})+$)/g,',')
 return total
 }
 },
 methods : {
 //减法
 handleReduce:function(index) {
 if(this.list[index].count === 1) return ;
 this.list[index].count--;
 },
 //加法
 handleAdd:function(index) {
 this.list[index].count++
 },
 //移除
 handleRemove:function(index) {
 this.list.splice(index,1)
 },
 //全选
 checkAll() {
 this.allCheck = !this.allCheck
 this.list.forEach(value => {
 value.isChecked = this.allCheck
 })
 },
 //单选,当全部选中时,改变全选按钮的状态
 singleCheck(index) {
 this.list[index].isChecked = !this.list[index].isChecked
 const selectData = this.list.filter(value => {
 return value.isChecked == true
 })
 this.allCheck = selectData.length === this.list.length ? true : false
 }
 }
})

style.css

[v-cloak] {
 display: none;
}
table {
 border: 1px solid #e9e9e9;
 border-collapse: collapse;
 border-spacing: 0;
 empty-cells: show;
}
th,td {
 padding: 8px 16px;
 border: 1px solid #e9e9e9;
 text-align: left;
}
th {
 background: yellowgreen;
 color: #5c6b77;
 font-weight: 600;
 white-space: nowrap;
}

效果图如下

Vue实现本地购物车功能

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

Javascript 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
vue.js实现二级菜单效果
Oct 19 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
node和vue实现商城用户地址模块
Dec 05 #Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 #Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 #Javascript
详解angularjs4部署文件过大解决过程
Dec 05 #Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 #jQuery
关于RxJS Subject的学习笔记
Dec 05 #Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 #Javascript
You might like
支持oicq头像的留言簿(一)
2006/10/09 PHP
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
django自定义模板标签过程解析
2019/12/14 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
村干部培训方案
2014/05/02 职场文书
考试诚信承诺书
2014/05/23 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
实验心得体会范文
2016/01/25 职场文书
初中历史教学反思
2016/02/19 职场文书
六年级情感作文之500字
2019/10/23 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript
python 多态 协议 鸭子类型详解
2021/11/27 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android