我寫(xiě)了個(gè)簡(jiǎn)單的購(gòu)物車(chē)如下！

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

首先是商品列表：

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

好， 商品列表就寫(xiě)完了， 商品類(lèi)，就三個(gè)屬性！

我們重點(diǎn)看，添加到購(gòu)物車(chē)的邏輯！ addItem() 方法

當(dāng)我們得到購(gòu)物車(chē)的數(shù)據(jù)的時(shí)候，我們就開(kāi)始將數(shù)組真正傳遞給購(gòu)物車(chē)了！

一個(gè)傳遞，另外我們購(gòu)物車(chē)組件就得接收！

Cart.vue

<template>

????<div>

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

????????????<!--購(gòu)物車(chē)列表 ?-->

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

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

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

????????????????????<th>商品名稱(chēng)</th>

????????????????????<th>價(jià)格</th>

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

????????????????????<th>單品總價(jià)</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>總價(jià)格</td>

????????????????????<!-- 計(jì)算屬性的寫(xiě)法-->

????????????????????<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(){ //亨達(dá)全球HantecGlobal返傭?http://www.kaifx.cn/broker/hantecglobal.html

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

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

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

???????????????????????this.cartList.splice(i,1);

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

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

?

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

??????????computed:{

??????????????//計(jì)算總價(jià)格

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

這個(gè)Cart.vue 中，我用到了，計(jì)算屬性（計(jì)算總價(jià)格）

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

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

我這個(gè)綁定就是綁定的 是否選中這個(gè)邏輯，我綁定到了，購(gòu)物車(chē)中，商品的一個(gè)字段！

至于v-for 遍歷時(shí)，key的綁定我選擇了，商品的id?

行，上面還缺，一個(gè)商品類(lèi)表那個(gè)組件的代碼！

HelloWorld.vue

<template>

<!-- ?每個(gè)組件必須有一個(gè)根組件，這點(diǎn)要明確的知道！-->

??<div>

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

?

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

??<ul>

??????<li v-for="(g,index) in goods" :key="index">

????????????{{g}} --{{g.name}}

????????<button @click = "addItem(index)">添加到購(gòu)物車(chē)</button>

??????</li>

??</ul> ??

?

??<!-- ?購(gòu)物車(chē)信息-->

<!-- ?使用注冊(cè)進(jìn)來(lái)的組件-->

<cart name="action" :cartList="cartList"></cart>

</div>

</template>

?

<script>

?

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

// 導(dǎo)入購(gòu)物車(chē)組件

import Cart from './Cart.vue';

export default {

??name: 'HelloWorld',

??components:{

????// ?局部注冊(cè)功能！

????Cart

??},

??data(){

????return {

??????show:false,

??????// 購(gòu)物車(chē)列表信息

??????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ù)的類(lèi)型

????msg: String

??},

??methods:{

????addItem(index){

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

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

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

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

?????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動(dòng)圖我就不做了，以后我會(huì)下個(gè)工具做個(gè)動(dòng)圖：

?

?

?

分享名稱(chēng)：VUE之購(gòu)物車(chē)
文章URL：http://jinyejixie.com/article30/gdjppo.html

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

廣告

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