前言
我們在開發商城的過程中，購物車功能師必不可少的一項，比如我們現在比較流行的淘寶，天貓，京東，小米，拼多多，唯品會，噹噹網等知名商城。那麼是否想過自己開發一個購物車功能呢？我們使用vue,angular都可以比較輕鬆的開發購物車這個功能。下面小編就帶您做一個簡單的購物車功能。
本章目標
使用vue搭建簡單的購物車功能
專案構建
- 引入vue.js檔案，然後搭建靜態的json陣列，渲染資料
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用vue實現簡單的購物車功能</title> </head> <body> <div id="shop-cart"> <table border="1" cellspacing="0" cellpadding="0" width="800" style="margin: 0 auto;"> <tr> <th>編號</th> <th>名稱</th> <th>價格</th> <th>數量</th> <th>小計</th> <th>操作</th> </tr> <tr v-for="(obj,index) of products"> <td>{{index+1}}</td> <td>{{obj.name}}</td> <td>{{obj.price}}</td> <td>{{obj.count}}</td> <td>{{obj.count*obj.price}}</td> <td> <button v-on:click="remove(index)">移除</button> </td> </tr> </table> </div> <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let vm= new Vue({//構建一個vue例項 el:'#shop-cart', //指定需要掛載的元素 data:{ products:[ { _id:10001, name:'apple', price:11.5, count:10, }, { _id:10002, name:'banana', price:12.5, count:5, }, { _id:10003, name:'pear', price:6.5, count:100, }, ] }, computed:{ }, methods:{ remove:function(index){//移除的方法 if(confirm('你確定要刪除嗎?')){ this.products.splice(index,1); } } } }) </script> </body> </html>
2.簡單的購物車功能我們已經做出來了，下面我們新增一些元素，比如數量可一加減，新增總價，隔行換色等等
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用vue實現簡單的購物車功能</title> <style type="text/css"> .bg{ background: lightblue; } </style> </head> <body> <div id="shop-cart"> <table border="1" cellspacing="0" cellpadding="0" width="800" style="margin: 0 auto;"> <tr> <th>編號</th> <th>名稱</th> <th>價格</th> <th>數量</th> <th>小計</th> <th>操作</th> </tr> <tr v-for="(obj,index) of products" v-bind:class="{bg:index%2==0}"> <td>{{index+1}}</td> <td>{{obj.name}}</td> <td>{{obj.price|currency(4)}}</td> <td> <button v-on:click="obj.count<=0?0:obj.count-=1">-</button> <input type="text" v-model="obj.count" v-on:keyup="obj.count=obj.count<=0?0:obj.count"/> <button v-on:click="obj.count+=1">+</button> </td> <td>{{obj.count*obj.price|currency(3)}}</td> <td> <button v-on:click="remove(index)">移除</button> </td> </tr> <tr> <td colspan="6" align="right"> {{total|currency(3)}} </td> </tr> </table> </div> <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Vue.filter('currency',function(v,n){ if(!v){ return "" } return "￥"+v.toFixed(n||2); }) let vm= new Vue({//構建一個vue例項 el:'#shop-cart', //指定需要掛載的元素 data:{ products:[ { _id:10001, name:'apple', price:11.5, count:10, }, { _id:10002, name:'banana', price:12.5, count:5, }, { _id:10003, name:'pear', price:6.5, count:100, }, ] }, computed:{//計算屬性 total:function(){//計算總價的方法 let sum=0; for(let i=0;i<this.products.length;i++){ sum+=parseFloat(this.products[i].price)*parseFloat(this.products[i].count) } return sum; } }, methods:{//方法 remove:function(index){//移除的方法 if(confirm('你確定要刪除嗎?')){ this.products.splice(index,1); } } } }) </script> </body> </html>
到這裡我們簡單的購物車功能已經實現了，現在是否覺得購物車這個功能很簡單呢？其實小編覺得也是，我們做的是最簡單的購物車功能，如果您覺得本篇文章幫助到您，可以點選關注一下，你的讚美將是小編前進的動力。感謝支援。
總結
vue在我們前端開發領域中帶來了許多的方便，當然angular也是一款非常不錯的前端框架，還有facebook公司發行的react，這前端三大主流框架中，小編比較喜歡vue，vue相對其它兩款框架來說比較容易上手和便捷，感興趣的同行都可以去嘗試一下。