Vue实现购物车基本功能

2024-10-04 13:22:53

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实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vuejs实现购物车功能

开始更新前端框架Vue.JS的相关博客. 功能概述学习了Vue.JS的一些基础知识,现在利用指令.数据绑定这些基础知识开发一个简单的购物车功能.功能要点如下: (1)展示商品的名称.单价和数量: (2)商品的数量可以增加和减少: (3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变: (4)商品可以从购物车中移除: (5)具有选择功能,只计算选中的商品的总价. 上一张截图,如下: 代码代码分成三部分,分别是HTML.JS.CSS.关键的是HTML和JS. HTML <!DOCTY
vue实现商城购物车功能

本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下首先,先上最终的效果图效果并不是很好看,但是这不是重点. 首先,我们先看下布局: <template> <div class="shopcar" id="demo04"> <div class="header-title"> <h3>购物车</h3> </div> <div class=
vue+vant-UI框架实现购物车的复选框全选和反选功能

购物车页面的设计图商品的列表代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(item,index) in shoppingListData.rows" :key="index" > <van-checkbox :value="item.goods_id" v-model="item.isChecked" ch
vuejs手把手教你写一个完整的购物车实例代码

由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=
基于Vuejs实现购物车功能

本文实例为大家分享了Vuejs购物车实现代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的vue购物车</title> <link rel="stylesheet" href="css/bootstrap.min.css&q
vuex实现的简单购物车功能示例

本文实例讲述了vuex实现的简单购物车功能.分享给大家供大家参考,具体如下: 购物车组件 <template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list/> </div> <h2>已选商品</h2> <div class="shop-cartbox"> &l
Vue实现购物车功能

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" /> &l
用vuex写了一个购物车H5页面的示例代码

通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.简单的来说,就是数据共用,对数据集中起来进行统一的管理. 如果您的应用够简单,您最好不要使用 Vuex.一个简单的 global event bus 就足够您所需了.但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的
vue实现购物车小案例

本文实例为大家分享了vue实现购物车小案例的具体代码,供大家参考,具体内容如下最终效果 HTML部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shopcar.html</title> <script src="https://cdn.jsdelivr.net/npm/vue&q
Vue.js实现的购物车功能详解

本文实例讲述了Vue.js实现的购物车功能.分享给大家供大家参考,具体如下: 使用计算属性,内置指令,方法等基础知识开发购物车. 需求分析:展示一个已经加入购物车的商品列表,包含商品名称.商品单价.购买数量和操作,以及最后确定是否选中商品的功能,总价格为选中商品的价格,够买数量可以增加减少,商品可以从购物车中移除.效果如图所示: --实例来自<Vue.js实战>第五章逻辑整理:vue实例定义一个数组list存放商品信息,定义方法与减少按钮,增加按钮等联系,动态改变商品数量,通过handleR

Vue实现购物车基本功能

相关推荐

随机推荐