基于Vuejs實(shí)現(xiàn)購物車功能
本文實(shí)例為大家分享了Vuejs購物車實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的vue購物車</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/vue.js"></script> <script src="js/data.js"></script> </head> <body> <div class="container"> <template v-if="data.length"> <h3>我的購物車:</h3> <div class="product"> <div class="item"> <span class="btn btn-default">商品名稱</span> <span class="btn btn-default left">商品單價(jià)</span> <span class="btn btn-default left">商品數(shù)量</span> <span class="btn btn-default left">操作</span> </div> <div class="item" style="padding:5%;border: 1px solid black" v-for="item in data"> <span class="btn btn-default">{{item.name}}</span> <span class="btn btn-default left" style="margin-left: 18%">{{item.price}}</span> <span> <em class="btn btn-primary add" v-on:click="add($index)" :class="{off:item.count==11}">+</em> {{item.count}} <em class="btn btn-primary reduce" v-on:click="reduce($index)" :class="{off:item.count==1}">-</em> </span> <span class="btn btn-danger left" v-on:click="remove(item)">移除</span> </div> </div> <h2>清單:</h2> <span class="btn btn-primary">商品總價(jià):{{price |currency '$' 2}}</span> </template> <template v-else> <div class="jumbotron"> <h1>您的購物車空了</h1> <p>是否去重新挑選</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">重新挑選</a></p> </div> </template> </div> </body> <script> new Vue({ el:'.container', data:{ data:data }, computed:{ price:function () { var price = 0; for(var i=0;i<this.data.length;i++){ var self = this.data[i]; price += self.count * self.price; } return price; } }, methods:{ add:function ($index) { var self = this.data[$index]; if(self.count >10){ return false; } self.count++; }, reduce:function($index){ var self = this.data[$index]; if(self.count <= 1){ return false } self.count--; }, remove:function(item){ this.data.$remove(item); } } }) </script> </html>
css:
h3{ text-align: center; } .left{ margin-left: 14%; } .item{ text-align: center; padding: 3%; } .add{ margin-left: 15%; } .off{ background-color: lightgrey; border: 1px solid lightgrey; }
js:
/** * Created by Administrator on 2016/7/29. */ var data = [ { name:'IPhone 6', price:5466, id:1, count:1 }, { name:'IMac', price:7466, id:2, count:1 }, { name:'iPad', price:5400, id:3, count:1 } ]
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程,請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)多個(gè)元素或多個(gè)組件之間動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多個(gè)元素或多個(gè)組件之間動(dòng)畫效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-09-09element ui 表格動(dòng)態(tài)列顯示空白bug 修復(fù)方法
今天小編就為大家分享一篇element ui 表格動(dòng)態(tài)列顯示空白bug 修復(fù)方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vuecli+AXdownload下載組件封裝?+css3下載懸浮球動(dòng)畫效果
當(dāng)觸發(fā)下載功能的時(shí)候,會(huì)觸發(fā)一個(gè)下載動(dòng)畫,下載懸浮球會(huì)自動(dòng)彈出,并且閃爍提示有新的下載任務(wù)直到下載任務(wù)完場提示,接下來通過本文介紹vuecli+AXdownload下載組件封裝?+css3下載懸浮球動(dòng)畫效果,需要的朋友可以參考下2024-05-05詳解如何使用 vue-cli 開發(fā)多頁應(yīng)用
本篇文章主要介紹了詳解如何使用 vue-cli 開發(fā)多頁應(yīng)用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12Vue標(biāo)簽屬性動(dòng)態(tài)傳參并拼接字符串的操作方法
這篇文章主要介紹了Vue標(biāo)簽屬性動(dòng)態(tài)傳參并拼接字符串的操作方法,我們需要根據(jù)傳入值的類型,在placeholder屬性賦值"請輸入長度",“請輸入寬度”,"請輸入厚度"等提示字符,本文通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11基于vue-router 多級路由redirect 重定向的問題
今天小編就為大家分享一篇基于vue-router 多級路由redirect 重定向的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09