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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
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制作图型计数器的例子
2006/10/09 PHP
模仿OSO的论坛(二)
2006/10/09 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
python杀死一个线程的方法
2015/09/06 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
QML使用Python的函数过程解析
2019/09/26 Python
python tornado修改log输出方式
2019/11/18 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
企业职业病防治方案
2014/05/29 职场文书
公司授权委托书样本
2014/09/15 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android