Vue实现购物车基本功能


Posted in Javascript onNovember 08, 2020

Vue实现购物车商品 加、减、单选、全选、删除、价格更新等功能

Vue实现购物车基本功能

Vue实现购物车基本功能

Dome和Vue代码

<!DOCTYPE html>
<html>

 <head>
 <meta charset="utf-8">
 <title>商城</title>
 <link rel="stylesheet" href="./css/common.css" >
 <link rel="stylesheet" href="./css/cart.css" >
 </head>
 <body>
 <div id="main">
 <div class="container">
 <div id="cart">
 <h1>购物车</h1>
 <form action="#" method="post">
 <table class="form">
 <thead>
 <tr>
 <th width="8%">选择</th>
 <th width="50%">商品</th>
 <th width="13%">单价(元)</th>
 <th width="15%">数量</th>
 <th width="14%">金额(元)</th>
 </tr>
 </thead>
 <tbody id="cart-goods-list">
 <tr v-for="cart in productList">
 <td>
 <input type="checkbox" name="good-id" :value="1" v-model="cart.select">
 </td>
 <td class="goods">
 <div class="goods-image">
 <img v-bind:src="cart.pro_img">
 </div>
 <div class="goods-information">
 <h3>{{cart.pro_name}}</h3>
 <ul>
 <li>{{cart.pro_purity}}</li>
 <li>{{cart.pro_service}}</li>
 </ul>
 </div>
 </td>
 <td>
 <span class="price">¥<em class="price-em">{{cart.pro_price.toFixed(2)}}</em></span>
 </td>
 <td>
 <div class="combo">
 <input type="button" name="minus" value="-" class="combo-minus" @click="cart.pro_num<2?cart.pro_num=1:cart.pro_num--">
 <input type="text" name="count" v-model.number="cart.pro_num" class="combo-value">
 <input type="button" name="plus" value="+" class="combo-plus" v-on:click="cart.pro_num++">
 </div>
 </td>
 <td>
 <strong class="amount">¥<em class="amount-em">{{(cart.pro_price*cart.pro_num).toFixed(2)}}</em></strong>
 </td>
 </tr>
 </tbody>
 <tfoot v-show="productList.length!=0">
 <tr>
 <td colspan="2">
 <label>
   <input type="checkbox" name="all" v-model="isSelectAll">
   <span @click="">全选</span>
   </label>
 <a href="#" rel="external nofollow" id="cart-delete" @click="del()">删除</a>
 </td>
 <td colspan="3">
 <span>合计:</span>
 <strong id="total-amount">¥<em id="total-amount-em">{{getTotal}}</em></strong>
 <input type="submit" value="立即结算" id="settlement">
 </td>
 </tr>
 </tfoot>

 </table>
 </form>
 <div v-show="productList.length===0">
 购物车还是空的哦~快来购物吧~
 </div>
 </div>
 </div>
 </div>
 </body>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 new Vue({
 el:"#cart",
 data:{
 productList:[
 {
 'pro_name': 'Dior 迪奥 花漾甜心小姐 女士淡香水',//产品名称
 'pro_purity': '50ml',//规格
 'pro_service': "不支持7天无理由退货",//售后
 'pro_num': 1,//数量
 'pro_img': 'img/1.jpg',//图片链接
 'pro_price': 498,//单价,
 'select': true ,//选中状态
 },
 {
 'pro_name': '迪奥(dior)口红CD烈艳蓝金唇膏',//产品名称
 'pro_purity': '350g',//规格
 'pro_service': "不支持7天无理由退货",//售后
 'pro_num': 1,//数量
 'pro_img': 'img/2.jpg',//图片链接
 'pro_price': 268,//单价
 'select': true //选中状态
 },
 {
 'pro_name': 'LANCÔME 兰蔻 嫩肌活肤精华肌底液',//产品名称
 'pro_purity': '50ml',//规格
 'pro_service': "不支持7天无理由退货",//售后
 'pro_num': 1,//数量
 'pro_img': 'img/3.jpg',//图片链接
 'pro_price': 598,//单价
 'select': true //选中状态
 }
 ]
 },
 computed:{
 getTotal:function(){
 var newArr=this.productList.filter(function(val){
 return val.select===true;
 })
 var price=0;
 for(var i=0;i<newArr.length;i++){
 price+=newArr[i].pro_num*newArr[i].pro_price
 }
 return price.toFixed(2)
 },
 isSelectAll:{
 get:function(){
 return this.productList.every(function(val){
 return val.select===true;
 })
 },
 set:function(newValue){
 for(var i=0;i<this.productList.length;i++){
 this.productList[i].select=newValue;
 }
 }
 }
 },
 methods:{
 del:function(){
 if(confirm("确定要删除吗")){
 var newArr=[];
 for(var i=0;i<this.productList.length;i++){
 if(this.productList[i].select===false){
 newArr.push(this.productList[i])
 }
 }
 this.productList=newArr;
 }
 }
 }
 
 })
 </script>
</html>

购物车部分CSS代码

@charset "utf-8";

#main{
 padding: 30px 0px;
}

#cart{
 background: #FFFFFF;
 padding: 40px;
}

#cart h1{
 line-height: 40px;
 padding: 0px 0px 10px 0px;
}

table.form{
 border-collapse: collapse;
 empty-cells: show;
 margin: 20px 0px;
 padding: 0px;
 table-layout: fixed;
 width: 100%;
}

table.form th,
table.form td{
 border-bottom: 1px solid #DDDDDD;
 padding: 15px 10px;
 text-align: left;
}

table.form{
 border-top: 3px solid #DDDDDD;
}

.goods .goods-image img{
 border: 1px solid #DDDDDD;
 float: left;
 height: 100px;
 margin: 0px 20px 0px 0px;
}

.goods .goods-information{
 float: left;
}

.goods .goods-information ul{
 color: #666666;
 font-size: 12px;
 line-height: 20px;
 margin:10px 0px 0px 0px;
}

.price,
.amount,
#total-amount{
 color: #E00000;
}

#total-amount{
 font-size: 22px;
}

.price em,
.amount em,
#total-amount em{
 font-style: normal;
}

.combo .combo-minus,
.combo .combo-value,
.combo .combo-plus{
 background: #FFFFFF;
 border: 1px solid #DDDDDD;
 color: #333333;
 float: left;
 font-weight: bold;
 margin: 0px;
 outline: none;
 text-align: center;
}

.combo .combo-minus,
.combo .combo-plus{
 font-size: 16px;
 height: 26px;
 line-height: 26px;
 padding: 0px;
 width: 24px;
}

.combo .combo-value{
 border-left: none;
 border-right: none;
 height: 20px;
 line-height: 20px;
 padding: 2px;
 width: 40px;
}

#cart-delete{
 margin-left: 20px;
}

#settlement{
 background: #E00000;
 border: none;
 color: #FFFFFF;
 float: right;
 font-size: 16px;
 height: 40px;
 line-height: 40px;
 margin: 0px;
 outline: none;
 padding: 0px;
 width: 160px;
}

注:CSS样式代码由于太多上面没有给全,只给了主要代码。小伙伴们可以根据实际情况修改样式

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

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

Javascript 相关文章推荐
jquery操作对象数组元素方法详解
Nov 26 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
vue实现顶部菜单栏
Nov 08 #Javascript
Vue实现菜单切换功能
Nov 08 #Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 #Javascript
JS实现手风琴特效
Nov 08 #Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 #Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 #Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 #Javascript
You might like
介绍几个array库的新函数 php
2006/12/29 PHP
php结合飞信 免费天气预报短信
2009/05/07 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php实现socket推送技术的示例
2017/12/20 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
javascript中var的重要性分析
2015/02/11 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
快速入门python学习笔记
2017/12/06 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
在python中使用nohup命令说明
2020/04/16 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
公司门卫管理制度
2014/02/01 职场文书
便利店投资创业计划书
2014/02/08 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
初一年级组工作总结
2015/08/12 职场文书
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android