我寫了個簡單的購物車如下！
首先是商品列表：
這個數據先是假數據，以後再改正
好， 商品列表就寫完了， 商品類，就三個屬性！
我們重點看，添加到購物車的邏輯！ addItem() 方法
當我們得到購物車的數據的時候，我們就開始將數組真正傳遞給購物車了！
一個傳遞，另外我們購物車組件就得接收！
Cart.vue
<template>
<div>
<h2>{{name}}</h2>
<!--購物車列表 -->
<table>
<tr>
<th>選中</th>
<th>商品名稱</th>
<th>價格</th>
<th>數量</th>
<th>單品總價</th>
<th>操作</th>
</tr>
<tr v-for = " c in cartList" :key = "c.id">
<td>
<!-- 雙向數據綁定 -->
<input type="checkbox" v-model="c.active">
</td>
<td>
{{c.name}}
</td>
<td>{{c.price}}</td>
<td>
<button @click = "addCount(c.id)">add</button>
{{c.count}}
<button @click = "minuxCount(c.id)">minus</button>
</td>
<td>{{c.count * c.price}}</td>
<td>
<button @click = "deleteFromCart(c.id)">刪除</button>
</td>
</tr>
<tr v-if="this.cartList.length">
<td>總價格</td>
<!-- 計算屬性的寫法 -->
<td colspan="5">{{getTotal}}</td>
</tr>
</table>
</div>
</template>
<script>
// 我們做事情，臉皮要厚！
export default {
name:"cart",
data(){
return {
}
},
// 接受參數的信息
props:["name","cartList"],
methods:{
addCount(index){
const good =this.cartList.find(item=>item.id==index);
good.count++;
},
minuxCount(index){
const good =this.cartList.find(item=>item.id==index);
if(good.count==0){
return;
}
good.count--;
},
deleteFromCart(index){
// 找到具體的商品
const good =this.cartList.find(item=>item.id==index);
if(window.confirm("您確定刪除該商品嘛？")){
function(){ //亨達全球HantecGlobal返傭 http://www.kaifx.cn/broker/hantecglobal.html
// 在這裏執行刪除操作
let i = this.cartList.indexOf(good);
// splice 刪除操作，可以修改原數組，昨天我們學過！ 不要忘記了
this.cartList.splice(i,1);
}
}
},
computed:{
//計算總價格
getTotal(){
var sum = 0;
this.cartList.forEach(element => {
if(element.active){
sum+=element.price*element.count;
}
});
return sum;
}
}
}
</script>
<style scoped>
.cart_box{
width:600px;
margin: 10px auto;
}
</style>
這個Cart.vue 中，我用到了，計算屬性（計算總價格）
還用到了，如果得到元素在數組中的下標
還用到了，雙向數據綁定！
我這個綁定就是綁定的 是否選中這個邏輯，我綁定到了，購物車中，商品的一個字段！
至於v-for 遍歷時，key 的綁定我選擇了，商品的id
行，上面還缺，一個商品類表那個組件的代碼！
HelloWorld.vue
<template>
<!-- 每個組件必須有一個根組件，這點要明確的知道！ -->
<div>
<h1>{{ msg }}</h1>
<!-- 商品列表信息 -->
<ul>
<li v-for="(g,index) in goods" :key="index">
{{g}} --{{g.name}}
<button @click = "addItem(index)">添加到購物車</button>
</li>
</ul>
<!-- 購物車信息 -->
<!-- 使用註冊進來的組件 -->
<cart name="action" :cartList="cartList"></cart>
</div>
</template>
<script>
// 我徹底蒙了， 除了一些特別的是函數，別的都是:
// 導入購物車組件
import Cart from './Cart.vue';
export default {
name: 'HelloWorld',
components:{
// 局部註冊功能！
Cart
},
data(){
return {
show:false,
// 購物車列表信息
cartList:[],
goods:[
{
id:"1001",
name:"道德經",
price:201
},{
id:"1002",
name:"道德經2",
price:203
},{
id:"1003",
name:"道德經3",
price:204
}
]
}
},
props: {
// 指定接受參數的類型
msg: String
},
methods:{
addItem(index){
// 得到該商品
const good = this.goods[index];
const item = this.cartList.find(item=>item.id == good.id);
// 如果item 不爲空，則表示已經添加到購車中了
if(item){
item.count+=1;
}else{
this.cartList.push({
...good,
count:1,
active:true
}
);
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
整體，就是 HelloWorld.vue 裏面使用 Cart.vue
gif動圖我就不做了，以後我會下個工具做個動圖：