vue實(shí)現(xiàn)購物車小案例
本文實(shí)例為大家分享了vue實(shí)現(xiàn)購物車小案例的具體代碼,供大家參考,具體內(nèi)容如下
最終效果
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>單價(jià)</p> <p>數(shù)量</p> <p>小計(jì)</p> <p>操作</p> </div> <div class="con2"> <ul class="uls1"> <input type="checkbox" class="jingdong"> <p class="uls1p2">京東自營</p> </ul> <ul class="uls1a"> <p>滿贈(zèng)</p> <a href="#" >活動(dòng)商品滿19,即可領(lǐng)取商品一件></a> <p>查看贈(zèng)品</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全網(wǎng)通雙卡雙待 64G 32G<br> 手機(jī) 玫瑰金色</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">移到我的關(guān)注</p> <p class="a666">加到我的關(guān)注</p> </ul> <ul class="uls2" id="box2"> <input type="checkbox" class="all all2"> <a href="#" > <img src="img/bbb.jpg" alt=""> <p>OPPO R11全網(wǎng)通雙卡雙待 64G 32G<br> 手機(jī) 玫瑰金色</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">移到我的關(guān)注</p> <p class="a666">加到我的關(guān)注</p> </ul> <div class="uls4"> <div class="uls4L"> <input type="checkbox" class="all"> <a href="#" class="delete">刪除選中商品</a> <a href="#" >移到我的關(guān)注</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>總價(jià):<span>¥</span><i>{{num3}}</i></p> </div> <p class="bbb">已節(jié)省:¥- 00.0</p> </div> </div> <div class="uls4b"> <a href="gouwu.html" rel="external nofollow" >去結(jié)算</a> </div> </div> </div> </div> </div> <div class="fixed"> <p>京東商城</p> <span>您確認(rèn)刪除嗎?</span> <button class="sure">確認(rèn)</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部分
//基礎(chǔ)加減 new Vue({ el:"#content1", data:{ add1:1, add2:2000, num1:1, num2:3000, num3:5000, //設(shè)置總價(jià)的最小值 }, 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); } });
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)滑動(dòng)驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)滑動(dòng)驗(yàn)證功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02vue3中g(shù)etCurrentInstance獲取組件實(shí)例踩坑詳細(xì)記錄
getCurrentInstance()是Vue.js3?Composition?API中的一個(gè)函數(shù),它的作用是獲取當(dāng)前組件的實(shí)例對(duì)象,下面這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance獲取組件踩坑的相關(guān)資料,需要的朋友可以參考下2024-02-02Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問題及解決
這篇文章主要介紹了Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08Vue實(shí)現(xiàn)virtual-dom的原理簡析
這篇文章主要介紹了Vue實(shí)現(xiàn)virtual-dom的原理簡析,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07$router.push()中通過path跳轉(zhuǎn)和通過name跳轉(zhuǎn)區(qū)別解析
今天在路由跳轉(zhuǎn)傳參時(shí)發(fā)現(xiàn)params傳參接收到的總是為空,才發(fā)現(xiàn)通過path和name傳參是有區(qū)別的,這篇文章主要介紹了$router.push()中通過path跳轉(zhuǎn)和通過name跳轉(zhuǎn)有什么區(qū)別,需要的朋友可以參考下2023-11-11vue配置文件自動(dòng)生成路由和菜單實(shí)例代碼
因?yàn)椴煌挠脩粲胁煌臋?quán)限,能訪問的頁面是不一樣的,所以我們?cè)趯懞笈_(tái)管理系統(tǒng)時(shí)就會(huì)遇過這樣的需求:根據(jù)后臺(tái)數(shù)據(jù)動(dòng)態(tài)添加路由和菜單,這篇文章主要給大家介紹了關(guān)于vue配置文件自動(dòng)生成路由和菜單的相關(guān)資料,需要的朋友可以參考下2021-08-08基于vue3和element plus實(shí)現(xiàn)甘特圖
甘特圖是一種重要的項(xiàng)目管理工具,它可以通過圖形化的方式展示項(xiàng)目的進(jìn)度和時(shí)間表,甘特圖通常由一個(gè)橫軸和一個(gè)縱軸組成,甘特圖對(duì)于項(xiàng)目管理非常重要,所以本文給大家介紹了如何基于vue3和element plus實(shí)現(xiàn)甘特圖,需要的朋友可以參考下2024-06-06