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中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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
一些星际专用术语解释
2020/03/04 星际争霸
PHP flock 文件锁详细介绍
2012/12/29 PHP
PHP实现懒加载的方法
2015/03/07 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
JS常用算法实现代码
2016/11/14 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
JS实现多功能计算器
2020/10/28 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
浅谈Python中的正则表达式
2021/06/28 Python
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js