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

創(chuàng)新互聯(lián)建站專注于莘縣網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供莘縣營銷型網(wǎng)站建設，莘縣網(wǎng)站制作、莘縣網(wǎng)頁設計、莘縣網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務，打造莘縣網(wǎng)絡公司原創(chuàng)品牌,更為您提供莘縣網(wǎng)站排名全網(wǎng)營銷落地服務。

首先是商品列表：

這個數(shù)據(jù)先是假數(shù)據(jù)，以后再改正

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

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

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

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

Cart.vue

<template>

????<div>

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

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

????????????<table>

????????????????<tr>

????????????????????<th>選中</th>

????????????????????<th>商品名稱</th>

????????????????????<th>價格</th>

????????????????????<th>數(shù)量</th>

????????????????????<th>單品總價</th>

????????????????????<th>操作</th>

????????????????</tr>

????????????????<tr v-for = " c in cartList" :key = "c.id">

????????????????????<td>

????????????????????????<!-- 雙向數(shù)據(jù)綁定-->

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

?

??????????????}

??????????},

????????// ??接受參數(shù)的信息

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

???????????????????????// 在這里執(zhí)行刪除操作

???????????????????????let i = this.cartList.indexOf(good);

???????????????????????// splice 刪除操作，可以修改原數(shù)組，昨天我們學過！ 不要忘記了

???????????????????????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 中，我用到了，計算屬性（計算總價格）

還用到了，如果得到元素在數(shù)組中的下標

還用到了，雙向數(shù)據(jù)綁定！

我這個綁定就是綁定的 是否選中這個邏輯，我綁定到了，購物車中，商品的一個字段！

至于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>

?

// 我徹底蒙了， 除了一些特別的是函數(shù)，別的都是:

// 導入購物車組件

import Cart from './Cart.vue';

export default {

??name: 'HelloWorld',

??components:{

????// ?局部注冊功能！

????Cart

??},

??data(){

????return {

??????show:false,

??????// 購物車列表信息

??????cartList:[],

??????goods:[

????????{

??????????id:"1001",

??????????name:"道德經(jīng)",

??????????price:201

????????},{

???????????id:"1002",

??????????name:"道德經(jīng)2",

??????????price:203

????????},{

???????????id:"1003",

??????????name:"道德經(jīng)3",

??????????price:204 ????????

????????}

??????]

????}

??},

??props: {

????// 指定接受參數(shù)的類型

????msg: String

??},

??methods:{

????addItem(index){

??????// 得到該商品

??????const ?good = this.goods[index];

??????const item = this.cartList.find(item=>item.id == good.id);

??????// 如果item不為空，則表示已經(jīng)添加到購車中了

?????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動圖我就不做了，以后我會下個工具做個動圖：

?

?

?

分享名稱：VUE之購物車
文章URL：http://chinadenli.net/article30/gdjppo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、企業(yè)建站、小程序開發(fā)、網(wǎng)站排名、網(wǎng)頁設計公司、自適應網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)