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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
vue element-ui实现动态面包屑导航
Dec 23 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 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模板类代码
2008/09/07 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python压缩和解压缩zip文件
2015/02/14 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
销售文员的岗位职责
2013/11/20 职场文书
环境科学毕业生自荐信
2013/11/21 职场文书
教师岗位职责范本
2013/12/29 职场文书
初中英语课后反思
2014/04/25 职场文书
计算机专业自荐信
2015/03/05 职场文书
紧急通知
2015/04/17 职场文书
自信主题班会
2015/08/14 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
JavaScript获取URL参数的方法分享
2022/04/07 Javascript