前言
我們在開發商城的過程中，購物車功能是必不可少的一項，比如我們現在比較流行的商城有淘寶，天貓，京東，小米，拼多多，唯品會，當當網等知名商城。那么你是否想過自己開發一個購物車的功能呢？我們使用vue,angular都可以比較輕松的開發購物車這個功能。下面小編就使用vue帶您做一個簡單的購物車功能。
本章目標
使用vue實現簡單的購物車功能
項目構建
1.引入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相對其它兩款框架來說比較容易上手和便捷，感興趣的同行都可以去嘗試一下。
