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 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
深入了解js原型模式
May 30 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
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
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
laravel5.6实现数值转换
2019/10/23 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python中asyncore的用法实例
2014/09/29 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
python实现名片管理系统
2018/11/29 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
详解Python 解压缩文件
2019/04/09 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
《石榴》教学反思
2014/03/02 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
无保留意见审计报告
2015/06/05 职场文书
上甘岭观后感
2015/06/10 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技