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"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="css/shopcar.css" >
<script src="js/shopcar.js"></script>
</head>
<body>
<div class="content1" id="content1">
<div class="con1">
<input type="checkbox" id="all" class="all">
<p>全选</p>
<p>商品</p>
<p>单价</p>
<p>数量</p>
<p>小计</p>
<p>操作</p>
</div>
<div class="con2">
<ul class="uls1">
<input type="checkbox" class="jingdong">
<p class="uls1p2">京东自营</p>
</ul>
<ul class="uls1a">
<p>满赠</p>
<a href="#" >活动商品满19，即可领取商品一件></a>
<p>查看赠品</p>
<a href="#" >去凑单</a>
</ul>
<ul class="uls2" id="box">
<input type="checkbox" class="all all1">
<a href="#" >
<img src="img/aaa.jpg" alt="">
<p>OPPO R11全网通双卡双待 64G 32G<br> 手机 玫瑰金色</p>
</a>
<p class="weight"><i id="weight">￥2000</i></p>
<button class="min" @click="sub(1,2000)">-</button>
<input ref="add1" type="text" class="txt" v-model="add1">
<button class="add" @click="add(1,2000)">+</button>
<p class="xiaoji"><i id="xiaoji1">￥{{add2}}</i></p>
<p class="a666 b666">删除</p>
<p class="a666">移到我的关注</p>
<p class="a666">加到我的关注</p>
</ul>
<ul class="uls2" id="box2">
<input type="checkbox" class="all all2">
<a href="#" >
<img src="img/bbb.jpg" alt="">
<p>OPPO R11全网通双卡双待 64G 32G<br> 手机 玫瑰金色</p>
</a>
<p class="weight"><i id="weight">￥3000</i></p>
<button class="min" @click="numsub(1,3000)">-</button>
<input ref="num1" type="text" class="txt" v-model="num1">
<button class="add" @click="numadd(1,3000)">+</button>
<p class="xiaoji"><i id="xiaoji1">￥{{num2}}</i></p>
<p class="a666 b666">删除</p>
<p class="a666">移到我的关注</p>
<p class="a666">加到我的关注</p>
</ul>
<div class="uls4">
<div class="uls4L">
<input type="checkbox" class="all">
<a href="#" class="delete">删除选中商品</a>
<a href="#" >移到我的关注</a>
<a href="#" >清除下柜商品</a>
</div>
<div class="uls4R">
<div class="uls4a">
<div class="uls4a1">
<div class="aaa">
<p>已选择<i class="chose">0</i>件商品^</p>
<p>总价：<span>￥</span><i>{{num3}}</i></p>
</div>
<p class="bbb">已节省：￥- 00.0</p>
</div>
</div>
<div class="uls4b">
<a href="gouwu.html" rel="external nofollow" >去结算</a>
</div>
</div>
</div>
</div>
</div>
<div class="fixed">
<p>京东商城</p>
<span>您确认删除吗？</span>
<button class="sure">确认</button>
<button class="quxiao">取消</button>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/shopcar.js"></script>
<script type="text/javascript">
</script>
css部分
/* common */
body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,code,form,input,textarea,p,th,td,fieldset,legend,figure{
margin:0;
padding:0;
}
body{
font-family:"微软雅黑",Arial;
}
ul,ol{
list-style:none;
}
a{
text-decoration:none;
}
img{
border:0;
}
/* content1 */
.content1{
width: 100%;
}
.con1{
width:952px;
height: 36px;
margin:0 auto;
background: #f3f3f3;
}
.con1 input{
float: left;
margin-top: 10px;
}
.con1 p{
float: left;
font-size: 12px;
line-height: 36px;
}
.con1 p:nth-child(3){
margin-left: 60px;
}
.con1 p:nth-child(4){
margin-left: 300px;
}
.con1 p:nth-child(5){
margin-left: 93px;
}
.con1 p:nth-child(6){
margin-left: 93px;
}
.con1 p:nth-child(7){
margin-left: 93px;
}
.con1 p:nth-child(8){
margin-left: 93px;
}
.con2{
width: 952px;
height: 364px;
margin:0 auto;
margin-top: 15px;
}
.con2 ul:first-child{
width: 100%;
height: 36px;
border-bottom: 1px solid #ececec;
}
.uls1 input, .uls1 p, .uls1 img{
float: left;
margin-top: 10px;
}
.uls1{
background: white;
}
.uls1 p{
font-size: 12px;
}
.all{
margin-right: 10px;
margin-left: 20px;
}
.uls1p1{
margin-right: 20px;
font-weight: 600;
}
.jingdong{
margin-left: 20px;
}
.uls1a{
width: 100%;
height:37px;
border-top: 2px solid #aaaaaa;
}
.uls1a p,.uls1a a{
float: left;
}
.uls1a p:nth-child(1){
font-size: 14px;
width: 35px;
height: 20px;
border: 1px solid #f5993c;
text-align: center;
line-height: 20px;
color: #ff9933;
margin-left: 20px;
margin-right: 20px;
margin-top: 5px;
}
.uls1a a:nth-child(2){
font-size: 12px;
margin-top: 10px;
margin-right: 20px;
color: #999999;
}
.uls1a p:nth-child(3){
width: 60px;
height: 20px;
background:red;
text-align: center;
line-height: 20px;
color: white;
font-size: 14px;
margin-top: 5px;
}
.uls1a a:nth-child(4){
font-size: 12px;
margin-top: 10px;
margin-left: 10px;
color: #666666;
}
.uls1p2{
margin-left: 10px;
color: white;
width: 55px;
height: 17px;
background: #e4393b;
text-align: center;
}
.uls2{
width: 100%;
height: 98px;
border-bottom:1px dashed #ececec;
background: white;
}
.uls2 input,.uls2 a,.uls2 img,.uls2 li,.weight,button{
float: left;
}
.uls2 a img{
width: 60px;
border: 1px solid #ececec;
margin-top: 17px;
}
.uls2 p,.uls2 span{
font-size: 12px;
}
.uls2 a p{
font-size: 12px;
color: #666666;
margin-top: 16px;
float: left;
margin-left: 10px;
}
.uls2 input{
margin-top: 40px;
}
.uls2 li span{
display: block;
}
.uls2 .txt{
width: 32px;
height: 19px;
border: 1px solid #cccccc;
border-left: none;
border-right: none;
outline:none;
text-indent: 10px;
margin-top: 20px;
font-weight: 600;
font-size: 12px;
}
.weight{
margin-left: 150px;
margin-top: 19px;
}
.uls2 li{
margin-top: 19px;
margin-left: 66px;
margin-right: 37px;
}
.uls2 button{
width: 20px;
height: 21px;
border: none;
border: 1px solid #cccccc;
background: white;
margin-top: 20px;
outline:none;
cursor: pointer;
}
.uls2 li p{
color: #999999;
text-decoration: line-through;
}
.uls2 a .laji{
width: 18px;
float: left;
margin-left: 60px;
margin-top: 20px;
}
.xiaoji{
float: left;
margin-left: 47px;
margin-top: 20px;
margin-right: 80px;
}
.content1 i{
font-style: normal;
}
.uls3{
width: 100%;
height: 36px;
border-bottom: 1px dashed #cccccc;
background: white;
}
.heji{
float: right;
margin-right: 20px;
}
.heji p,.heji span{
float: left;
font-size: 12px;
line-height: 36px;
}
.heji span{
color: #999999;
}
.heji p:nth-child(2),.heji p:nth-child(4){
margin-right: 44px;
}
.uls4{
width: 100%;
height: 60px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
margin-top: 15px;
background: white;
}
.uls4L{
float: left;
margin-left: 10px;
}
.uls4R{
float: right;
}
.uls4L p{
float: left;
line-height: 60px;
font-size: 12px;
color: #999999;
margin-right: 10px;
}
.uls4L input{
float: left;
margin-top: 25px;
margin-right: 10px;
}
.uls4L a{
font-size: 12px;
color: #999999;
line-height: 60px;
}
.uls4L a:first-child{
margin-right: 5px;
}
.uls4a,.uls4b{
float: left;
}
.uls4a1 p{
float: left;
font-size: 12px;
}
.uls4a2 p ,.uls4a2 span{
float: left;
font-size: 12px;
margin-top: 10px;
}
.uls4a{
margin-right: 20px;
}
.aaa p{
font-size: 12px;
color: #999999;
}
.aaa p:first-child{
margin-right: 20px;
margin-top: 20px;
}
.aaa p:last-child{
margin-top: 20px;
}
.aaa span,.aaa i{
color: red;
font-weight: 600;
}
.bbb{
float: left;
color: #999999;
}
.shopnum{
color: #ff9933;
font-weight: 600;
}
.uls4b a{
width: 70px;
height: 61px;
display: block;
background: red;
font-size: 14px;
color: white;
font-weight: 600;
text-align: center;
line-height: 60px;
}
.weight{
margin-right: 60px;
}
.a666{
cursor: pointer;
}
.fixed{
position: fixed;
width: 400px;
height: 200px;
background: white;
z-index: 200;
top:40%;
left: 30%;
border: 1px solid red;
display: none;
}
.fixed p{
width: 380px;
height: 30px;
background: red;
font-size: 12px;
color: white;
line-height: 30px;
padding-left: 20px;
}
.fixed span{
display: block;
color: #666666;
margin-top: 20px;
text-align: center;
}
.fixed button:nth-child(3){
margin-left: 140px;
}
.fixed button{
margin-right: 20px;
border: none;
width: 50px;
height: 30px;
margin-top: 50px;
border: 1px solid red;
color: red;
background: white;
}
js部分
//基础加减
new Vue({
el:"#content1",
data:{
add1:1,
add2:2000,
num1:1,
num2:3000,
num3:5000, //设置总价的最小值
},
methods:{
add:function(inc,inc2,inc3){
this.add1 += inc;
this.add2 += inc2;
this.num3 = this.add2 +this.num2;
},
sub:function(dec,dec2,dec3){
this.add1 -= dec;
this.add2 -= dec2;
this.num3 = this.add2 +this.num2;
if(this.add1 <= 1){
this.add1 =1;
}
if(this.add2 <= 2000){
this.add2 =2000;
}
if(this.num3 <= 5000){
this.num3 =5000;
}
},
numadd:function(mun1,mun2,mun3){
this.num1 += mun1;
this.num2 += mun2;
this.num3 = this.add2 +this.num2;
this.num3 = this.add2 +this.num2;
},
numsub:function(mun1,mun2,mun3){
this.num1 -= mun1;
this.num2 -= mun2;
this.num3 = this.add2 +this.num2;
if(this.num1 <= 1){
this.num1 =1;
}
if(this.num2 <= 3000){
this.num2 =3000;
}
if(this.num3 <= 5000){
this.num3 =5000;
}
},
}
});
$(function(){
$(".b666").click(function(){
var $this = $(this);
$(".fixed").css("display","block");
$(".sure").click(function(){
$this.parent().css("display","none");
$(this).parent().css("display","none");
});
$(".quxiao").click(function(){
$(this).parent().css("display","none");
});
});
});
//全选
$("#all").click(function(){
if($("#all[type='checkbox']").prop("checked") == true){
$(".all").attr('checked', true);
$(".chose").html(2);
}else{
$(".all").attr('checked', false);
$(".chose").html(0);
}
});
$(".all1").click(function(){
if($(".all1[type='checkbox']").prop("checked") == true){
$(".chose").html(1);
}else{
$(".chose").html(0);
}
});
$(".all2").click(function(){
if($(".all2[type='checkbox']").prop("checked") == true){
$(".chose").html(1);
}else{
$(".chose").html(0);
}
});
$(".delete").click(function(){
if($(".all[type='checkbox']").prop("checked") == false){
return;
}
if($("#all[type='checkbox']").prop("checked") == true){
$(".uls2").css("display","none");
$(".chose").html(0);
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
赞 (0)
相关推荐
-
vue 2.0 购物车小球抛物线的示例代码
本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下: 备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="droppi
-
基于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写了一个购物车H5页面的示例代码
通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.简单的来说,就是数据共用,对数据集中起来进行统一的管理. 如果您的应用够简单,您最好不要使用 Vuex.一个简单的 global event bus 就足够您所需了.但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的
-
Vuejs实现购物车功能
开始更新前端框架Vue.JS的相关博客. 功能概述 学习了Vue.JS的一些基础知识,现在利用指令.数据绑定这些基础知识开发一个简单的购物车功能.功能要点如下: (1)展示商品的名称.单价和数量: (2)商品的数量可以增加和减少: (3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变: (4)商品可以从购物车中移除: (5)具有选择功能,只计算选中的商品的总价. 上一张截图,如下: 代码 代码分成三部分,分别是HTML.JS.CSS.关键的是HTML和JS. HTML <!DOCTY
-
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
-
vue实现商城购物车功能
本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下 首先,先上最终的效果图 效果并不是很好看,但是这不是重点. 首先,我们先看下布局: <template> <div class="shopcar" id="demo04"> <div class="header-title"> <h3>购物车</h3> </div> <div class=
-
Vue2.0实现购物车功能
简介 vue.js是由华人尤雨溪开发的一套MVVM框架.vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统,它非常适用于具有复杂交互逻辑的前端应用,如一些单页应用程序,有很多表单操作,页面中的内容需要根据用户的操作动态变化. 主要特性: 1.响应式的数据绑定 2.组件化开发 3.Virtual DOM 开发准备 工具 我使用的编辑器是sublime text3,首先要先安装个插件sublimeServer,用来搭建一个http服务器,使用详情请查看这篇博
-
vuejs手把手教你写一个完整的购物车实例代码
由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=
-
用vue和node写的简易购物车实现
项目介绍 这是用vue写前端,用node来接收前端发来的请求,然后进行相应的数据操作,例如数据的存取和删除等.这是个人的练习项目,目前功能做的比较简单,主要是展示商品列表,把商品加入购物车,从购物车删除商品三个小功能. 搭建本地环境 因为是用vue,需要用babel把es6语法转为es5语法. 1.配置.babelrc文件 { "presets": [ "es2015", "stage-2" ], "plugins": [&q