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 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
JS中==、===你分清楚了吗
Mar 04 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
php email邮箱正则
2008/10/08 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
python得到单词模式的示例
2018/10/15 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
国际商务系学生个人的自我评价
2013/11/26 职场文书
工作表扬信的范文
2014/01/10 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
爱耳日活动总结
2014/04/30 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
2014年转正工作总结
2014/11/08 职场文书
大学生入党自荐书
2015/03/05 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android