VUE之購物車

我寫了個簡單的購物車如下！

首先是商品列表：

這個數據先是假數據，以后再改正

好， 商品列表就寫完了， 商品類，就三個屬性！

我們重點看，添加到購物車的邏輯！ addItem() 方法

當我們得到購物車的數據的時候，我們就開始將數組真正傳遞給購物車了！

一個傳遞，另外我們購物車組件就得接收！

Cart.vue

<template>

????<div>

????????<h3>{{name}}</h3>

????????????<!--購物車列表 ?-->

????????????<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>

????<h2>{{ msg }}</h2>

?

??<!-- ?商品列表信息 -->

??<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>

h4 {

??margin: 40px 0 0;

}

ul {

??list-style-type: none;

??padding: 0;

}

li {

??margin: 0 10px;

}

a {

??color: #42b983;

}

</style>

整體，就是 HelloWorld.vue 里面使用 Cart.vue

gif動圖我就不做了，以后我會下個工具做個動圖：

?

?

?