Vue模擬實現(xiàn)購物車結算功能
更新時間：2022年04月13日 14:57:40 作者：池魚i_
這篇文章主要為大家詳細介紹了Vue模擬實現(xiàn)購物車結算功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現(xiàn)購物車結算功能的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js" type="text/javascript"></script>
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
<style type="text/css">
* {
padding: 0;
margin: 0
}
a {
text-decoration: none;
}
.container {
width: 500px;
margin: 10px auto;
}
.title {
width: 500px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
background-color: paleturquoise;
}
.item {
position: relative;
height: 50px;
border-bottom: 1px solid paleturquoise;
}
.item img {
float: left;
width: 100px;
height: 50px;
}
.item .price {
position: absolute;
float: left;
width: 120px;
margin-left: 10px;
top: 15px;
left: 100px;
}
.item .change {
position: absolute;
left: 220px;
top: 15px;
float: left;
width: 200px;
}
.change a {
float: left;
display: block;
width: 20px;
height: 20px;
font-size: 18px;
text-align: center;
line-height: 20px;
background-color: #ccc;
}
.change input {
float: left;
width: 50px;
margin: 0 5px;
}
.item .del {
position: absolute;
top: 8px;
left: 420px;
color: red;
font-size: 24px;
}
.item .del:hover {
top: 0;
height: 50px;
background-color: blue;
}
.total {
position: relative;
width: 500px;
height: 50px;
background-color: cornflowerblue;
}
.total span {
position: absolute;
top: 14px;
left: 250px;
}
.total span em {
color: red;
font-style: normal;
font-size: 20px;
}
.total button {
position: absolute;
top: 8px;
left: 400px;
width: 50px;
height: 35px;
border-radius: 25%;
border: none;
outline: none;
background-color: tomato;
}
</style>
</head>
<body>
<div id="app">
<div>
<div class="container">
<my-cart></my-cart>
</div>
</div>
</div>
<script type="text/javascript">
// 三個子組件
var CartTitle = {
props: ['uname'],
template: `<div class="title">{{uname}}的商品</div>`
}
var CartList = {
props: ['list'],
template: ` <div class="list">
<div class="item" :key="item.id" v-for="item in list">
<img :src="item.img" alt="">
<div class="price">{{item.price}}￥/件</div>
<div class="change">
<a href="" @click.prevent=" sub(item.id)">-</a>
<input type="text" class="num" :value="item.num" @blur="changenum(item.id,$event)">
<a href="" @click.prevent=" add(item.id)">+</a>
</div>
<div class="del" @click="del(item.id)">×</div>
</div>
</div>
`,
methods: {
// 向父組件傳遞需要刪除的id
del: function(id) {
// console.log(id);
this.$emit("del-cart", id);
},
// 修改表單輸入的數(shù)量
changenum: function(id, event) {
//console.log(id, event.target.value);
// 向父組件傳遞然后再修改數(shù)量
this.$emit('change-num', {
id: id,
num: event.target.value
})
},
// 點擊減號按鈕
sub: function(id) {
this.$emit('sub-num', id);
},
//點擊加號按鈕
add: function(id) {
this.$emit('add-num', id);
}
}
}
var CartTotal = {
props: ['list'],
template: `<div class="total">
<span>總價：<em>{{total}}</em>￥</span>
<button>結算</button>
</div>`,
computed: {
total: function() {
var sum = 0;
this.list.forEach(item => {
sum += item.price * item.num;
});
return sum;
}
}
}
// 定義父組件
Vue.component('my-cart', {
data: function() {
return {
uname: '我',
list: [{
id: 1,
name: '安踏鞋子',
price: 260,
num: 1,
img: 'img/a.jpg'
}, {
id: 2,
name: '海爾熱水器',
price: 2000,
num: 1,
img: 'img/hai.jpg'
}, {
id: 3,
name: 'iphone手機',
price: 7000,
num: 1,
img: 'img/iphone.jpg'
}, {
id: 4,
name: '華為手機',
price: 4500,
num: 1,
img: 'img/h.jpg'
}]
}
},
template: `<div class="mycart">
<cart-title :uname="uname"></cart-title>
<cart-list :list="list" @del-cart="delcart($event)" @change-num="changeNum($event)" @sub-num="subnum($event)" @add-num="addnum($event)"></cart-list>
<cart-total :list="list"></cart-total>
</div>`,
components: {
'cart-title': CartTitle,
'cart-list': CartList,
'cart-total': CartTotal,
},
methods: {
delcart: function(id) {
// 根據id刪除list中對應的數(shù)據
// 1.找到id對應數(shù)據的索引
var index = this.list.findIndex(item => {
return item.id == id;
});
// 2.根據索引刪除對應的數(shù)據
this.list.splice(index, 1);
},
// 根據id修改list中的數(shù)量num
changeNum: function(val) {
//console.log(val);
this.list.some(item => {
if (item.id == val.id) {
item.num = val.num;
}
})
},
//減號減少num
subnum: function(event) {
// console.log(event); event是點擊的id號
this.list.some(item => {
if (item.id == event && item.num > 0) {
item.num--;
}
})
},
// 加號增加num
addnum: function(event) {
this.list.some(item => {
if (item.id == event) {
item.num++;
}
})
}
}
});
var vm = new Vue({
el: "#app",
data: {
}
});
</script>
</body>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
vue router導航守衛(wèi)（router.beforeEach()）的使用詳解
導航守衛(wèi)主要用來通過跳轉或取消的方式守衛(wèi)導航。這篇文章主要介紹了vue-router導航守衛(wèi)（router.beforeEach()）的使用,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue 進階之實現(xiàn)父子組件間的傳值，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
本文將探討 Vue 事件處理中常見的上下文問題及其解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項
this.$set()和Vue.set()本質方法一樣，前者可以用在methods中使用。這篇文章主要介紹了Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue剔除數(shù)組指定位置元素的幾種方法,文中主要介紹了單個去除和批量去除這兩種方法,并通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-03-03
vue在?for?循環(huán)里使用異步調用?async/await的方法
大家都遇到這樣的問題,在使用函數(shù)的async/await異步調用時候,放在正常函數(shù)中單個調用時沒有問題的,但是await放在forEach()循環(huán)里面就會報錯,本文給大家介紹vue?如何在?for?循環(huán)里面使用異步調用?async/await,感興趣的朋友一起看看吧2023-10-10
在本文中我們給大家整理了一篇關于Vue表單控件綁定的相關知識點內容，有需要的朋友們參考下。2019-02-02
Vue 本身以及周邊生態(tài)在設計語法糖上幾乎沒讓我失望過,包括本次亮相的 Vue Vine,它的出現(xiàn)引起了我對 Vue3 組件編寫方式的好奇,以及哪一種方式更接近「最佳實踐」？下面讓我來為大家一一道來2024-07-07
本文主要介紹了vite+vue3項目初始化搭建的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-07-07
這篇文章主要為大家介紹了Avue?組件庫的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08