<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div class=container>
<my-cart></my-cart>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
/*標題頭子組件*/
var cartTitle = {
props: ['uname'],/*用於從父組件傳來值*/
template: `
<div class='title'>{{uname}}商品</div>
`
}
/*商品列表子組件*/
var cartList = {
props: ['list'],
template: `
<div>
<div v-bind:key='item.id' v-for='item in list' class="item"><!-- 遍歷展示所有商品 -->
<img v-bind:src="item.img"/>
<div class="name">{{item.name}}</div>
<div class="change">
<a href="" v-on:click.prevent='sub(item.id)'>－</a><!-- 阻止a標簽原有跳轉，並在點擊時，觸發sub方法-->
<input type="text" class="num" v-on:blur='changeNum(item.id,$event)' v-bind:value='item.num' /><!-- 在失去焦點時觸發changeNum方法，通過$event傳遞原有數據值-->
<a href="" v-on:click.prevent='add(item.id)'>＋</a>
</div>
<div class="del" v-on:click='del(item.id)'>×</div><!-- 刪除商品-->
</div>
</div>
`,
methods: {
sub: function (id) {
this.$emit('change_num', {/*子組件不直接對數據處理，通過向父組件傳遞change_num事件，讓父組件處理數據*/
id: id,
type: 'sub'
})
},
add: function (id) {
this.$emit('change_num', {
id: id,
type: 'add'
})
},
changeNum: function (id, event) {
this.$emit('change_num', {/*子組件不直接對數據處理，通過向父組件傳遞change_num事件，讓父組件處理數據,原來商品數量通過event.target.value傳遞*/
id: id,
num: event.target.value,
type: 'change'
});
},
del: function (id) {
this.$emit('cart-del', id);/*子組件不直接對數據處理，通過向父組件傳遞cart-del事件，讓父組件處理數據*/
}
}
}
/*結算尾子組件*/
var cartTotal = {
props: ['list'],
template: `
<div class="total">
<span>總價：{{total}}</span>
<button>結算</button>
</div>
`,
computed: {/*計算方法*/
total: function () {
var t = 0;
this.list.forEach(item => {
t += item.price * item.num;
});
return t;
}
}
}
Vue.component('my-cart', {/*組件名稱my-cart*/
/*數據data*/
data: function () {
return {
uname: 'ben',
list: [{
id: 1,
name: 'TCL彩電',
price: 1000,
num: 1,
img: 'img/a.jpg'
},
{
id: 2,
name: '機頂盒',
price: 1000,
num: 1,
img: 'img/b.jpg'
}, {
id: 3,
name: '海爾冰箱',
price: 1000,
num: 1,
img: 'img/c.jpg'
}, {
id: 4,
name: '小米手機',
price: 1000,
num: 1,
img: 'img/d.jpg'
}, {
id: 5,
name: 'PPTV電視',
price: 1000,
num: 2,
img: 'img/e.jpg'
}
]
}
},
/*包含三個子組件，分別是標題頭，中間的商品列表，最后的結算尾*/
template: `
<div>
<cart-title v-bind:uname='uname'></cart-title>
<cart-list v-bind:list='list' v-on:cart-del='delCart($event)' v-on:change_num='changeNum($event)'></cart-list>
<cart-total v-bind:list='list'></cart-total>
</div>
`,
components: {
'cart-title': cartTitle,
'cart-list': cartList,
'cart-total': cartTotal
},
methods: {
/*改變商品數量的方法*/
changeNum: function (val) {
if (val.type == 'change') {
/*遍歷找到商品與之所對應的id*/
this.list.some(item => {
if (item.id == val.id) {
item.num = val.num;
return true;
}
});
} else if (val.type == 'sub') {
this.list.some(item => {
if (item.id == val.id) {
item.num -= 1
}
})
} else {
this.list.some(item => {
if (item.id == val.id) {
item.num += 1
}
})
}
},
/*刪除商品的方法*/
delCart: function (id) {
/*遍歷找到id所對應的列表中的序號*/
var index = this.list.findIndex(item => {
return item.id == id;
});
/*刪除列表中該序號的值*/
this.list.splice(index, 1);
}
}
});
var app = new Vue({
el: '#app',
data: {
}
});
</script>
</body>
</html>
vue組件化購物車
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。