vue實現(xiàn)購物車全部功能的簡單方法
更新時間：2021年07月06日 10:49:34 作者：老張在線敲代碼
vue是前端輕量級MVVM框架,入門門檻相對較低,今天用Vue做一個購物車實例,所以下面這篇文章主要給大家介紹了關于vue實現(xiàn)購物車全部功能的簡單方法,需要的朋友可以參考下
主要功能如下：
- 增加商品信息
- 修改商品信息
- 刪除單個商品
- 刪除多個商品
- 清空購物車
- 對商品單價進行降序排序
- 根據(jù)商品名稱實現(xiàn)查找
- 實現(xiàn)商品數(shù)量加減
- 全選反選
- 實現(xiàn)勾選商品的總價計算
效果圖如下：
由于功能比較多就不一個個講了，我們先來講幾個主要功能的邏輯（增刪改查），最后放全放部代碼
首先我們先來看增加商品功能
//先來一個按鈕綁定顯示事件，點擊添加后出現(xiàn)一個彈窗 <button type="button" @click="xian">添加</button>
//return 中定義了一個dis默認為false
xian() {
if (!this.dis == false) {
this.dis = false
} else {
this.dis = true
}
},
然后再彈窗中點擊確認修改，綁定一個事件把商品信息添加進去
<button type="button" @click="tian">確認添加</button>
//將要添加的商品信息push到一個新的數(shù)組中，添加完成之后關閉彈窗
tian() {
if (this.name == "" || this.counrty == "" || this.price == "") {
alert("商品信息不允許為空！")
return false
} else {
this.shopPings.push({
name: this.name,
counrty: this.counrty,
price: this.price,
count: this.count,
})
}
this.name = "",
this.counrty = "",
this.price = "",
this.count = ""
this.dis = false
},
商品增加進去之后突然發(fā)現(xiàn)商品信息寫錯了?。?？？不要慌，接下來帶大家看看修改功能
還是老規(guī)矩先定義一個按鈕綁定顯示事件，然后綁定顯示事件，除了事件名稱之外，跟上面添加類同，我們直接來看確認修改功能
//定義按鈕綁定事件
<button type="button" @click="xiugai">確認修改</button>
//將購物車中的商品信息跟修改之后的進行賦值修改，修改完成之后關閉彈窗
xiugai() {
console.log(this.int)
let index = this.int
console.log(this.name, this.price, this.count, )
this.shopPings[index].name = this.name
this.shopPings[index].price = this.price
this.shopPings[index].counrty = this.counrty
this.shopPings[index].count = this.count
this.dis1 = false
},
有了增加修改之后我們再來寫一個刪除
定義一個按鈕綁定事件，傳入一個index值最后splice根據(jù)下標刪除一條
定義一個按鈕綁定事件，傳入一個index值最后splice根據(jù)下標刪除一條
<button @click="del(index)">刪除</button>
del(index) {
this.shopPings.splice(index, 1);
},
清空購物車的話就比較簡單了直接設置按鈕點擊后數(shù)組為空即可
alldel() {
this.shopPings = []
},
最后我們來看一下購物車中的查詢功能
//return中設置input的value值 //定義一個input框，綁定value值，設置enter鍵盤事件并且綁定搜索事件 <input type="text" placeholder="請輸入要查詢的商品名稱" v-model="input_value" @keyup.13="search">
具體看注釋
//先來一個判斷判斷搜索框為空的時候進行查詢會有提示信息不允許為空
//然后拿到數(shù)組中的每一項的名稱進行查找如果沒有這個商品名稱則提示沒有該商品
//最后對數(shù)組filter進行篩選，通過搜索框中輸入的商品名稱對比購物車中的商品名稱來找到對應商品
search() {
if (!this.input_value) {
return alert('請輸入內(nèi)容')
}
if (
this.shopPings.every((v) => {
v.name.indexOf(this.input_value) == -1
})
) {
this.input_value = ''
return alert('沒有此商品')
}
this.shopPings = this.shopPings.filter((v) => {
v.name.replace(this.input_value, this.input_value)
return v.name.indexOf(this.input_value) != -1
})
}
全部代碼：
<template>
<div class="shopCar">
<header>
<button type="button" @click="delSelect">批量刪除</button>
<button type="button" @click="alldel">清空購物車</button>
<button type="button" @click="xian">添加</button>
<button type="button" @click="jiang">排序</button>
<input type="text" placeholder="請輸入要查詢的商品名稱" v-model="input_value" @keyup.13="search">
<div class="xiu" v-show="dis1">
<input type="text" placeholder="名稱" v-model="name">
<input type="text" placeholder="價格" v-model="price">
<input type="text" placeholder="數(shù)量" v-model="count">
<input type="text" placeholder="產(chǎn)地" v-model="counrty">
<button type="button" @click="xiugai">確認修改</button>
</div>
<div class="add" v-show="dis">
<input type="text" placeholder="名稱" v-model="name">
<input type="text" placeholder="價格" v-model="price">
<input type="text" placeholder="數(shù)量" v-model="count">
<input type="text" placeholder="產(chǎn)地" v-model="counrty">
<button type="button" @click="tian">確認添加</button>
</div>
</header>
<main>
<ul>
<li>
<p><input type="checkbox" v-model="allChecked">
全選</p>
<p>名稱</p>
<p>產(chǎn)地</p>
<p>數(shù)量</p>
<p>單價</p>
<p>小計</p>
<p>操作</p>
</li>
<li v-for="(item,index) in shopPings" :key="index">
<p><input type="checkbox" v-model="item.checked">{{item.id}}</p>
<p>{{item.name}}</p>
<p>{{item.counrty}}</p>
<p><button type="button" @click="add(item)">+</button>
<input type="text" v-model="item.count" style="width:20px">
<button type="button" @click="remove(item)">-</button>
</p>
<p>{{item.price}}</p>
<p>{{item.price*item.count |suffix}}</p>
<p>
<button type="button" @click="xiu(index)"> 修改</button>
<button @click="del(index)">刪除</button>
</p>
</li>
</ul>
</main>
<footer>
<p>總計{{state.sum |suffix}}</p>
</footer>
</div>
</template>
<style scoped lang="scss">
.shopCar {
width: 1000px;
border: 2px solid black;
margin: 100px auto;
overflow: auto;
header {
display: flex;
justify-content: space-between;
width: 600px;
height: 27px;
overflow: hidden;
.add {
width: 400px;
background: #e4e1e1;
position: absolute;
left: 39%;
top: 40%;
input {
display: block;
margin: 20px auto;
}
button {
display: block;
margin: 0 auto;
}
}
.xiu {
width: 400px;
background: #e4e1e1;
position: absolute;
left: 39%;
top: 40%;
input {
display: block;
margin: 20px auto;
}
button {
display: block;
margin: 0 auto;
}
}
}
main {
// height: 400px;
margin-top: 10px;
ul {
li {
height: 78px;
border-bottom: 2px solid black;
display: flex;
justify-content: space-between;
p {
float: left;
width: 140px;
height: 27px;
border: 2px solid black;
text-align: center;
}
}
}
}
footer {
height: 50px;
margin-top: 13px;
line-height: 50px;
}
}
</style>
<script>
const shopData = [{
id: "",
name: "鞋子",
counrty: "山西",
count: 1,
price: 800,
},
{
id: "",
name: "櫥柜",
counrty: "北京",
count: 1,
price: 3200,
},
{
id: "",
name: "口紅",
counrty: "河北",
count: 2,
price: 200,
},
{
id: "",
name: "漢堡",
counrty: "河南",
count: 2,
price: 200,
},
]
export default {
//過濾器
filters: {
suffix(value) {
let price = Number(value)
return `￥ ${price.toFixed(2)}`
//在金額前面插入一個￥符號然后定義小數(shù)點后面為倆位數(shù)字
}
},
computed: {
//全選
allChecked: {
get() {
const checkeds = this.shopPings.filter((item) => item.checked)
return checkeds.length === this.shopPings.length
},
set(state) {
// console.log(state)
this.shopPings.map((item) => {
item.checked = state
return item
})
}
},
//小計計算
totalPrice: function () {
var total = 0;
for (var i = 0; i < this.checkList.length; i++) {
var item = this.checkList[i];
total += item.price * item.count;
}
return total.toLocaleString();
},
//選中的商品總價計算
state() {
const checkeds = this.shopPings.filter((item) => item.checked)
const checked = checkeds.length === this.shopPings.length
const sum = checkeds.reduce((a, b) => {
return a + b.count * b.price;
}, 0)
return {
count: checkeds.length,
sum
}
},
},
data() {
return {
shopPings: [],
dis: false, //確認提交
dis1: false, //確認修改
id: "",
name: "", //名稱
price: "", //單價
count: "", //數(shù)量
counrty: "", //產(chǎn)地
input_value: "", //查詢框中input的值
}
},
mounted() {
window.fetch("/").then(() => {
this.shopPings = shopData.map((item) => {
item.checked = false
return item
})
})
},
methods: {
//添加商品
xian() {
if (!this.dis == false) {
this.dis = false
} else {
this.dis = true
}
},
//確認添加
tian() {
if (this.name == "" || this.counrty == "" || this.price == "") {
alert("商品信息不允許為空！")
return false
} else {
this.shopPings.push({
name: this.name,
counrty: this.counrty,
price: this.price,
count: this.count,
})
}
this.name = "",
this.counrty = "",
this.price = "",
this.count = ""
this.dis = false
},
//刪除商品
del(index) {
this.shopPings.splice(index, 1);
},
//刪除選中的商品
delSelect() {
this.shopPings = this.shopPings.filter((item) => {
if (!item.checked) {
return item
}
})
},
//全部刪除
alldel() {
this.shopPings = []
},
//減少購買
remove(data) {
if (data.count > 0) {
data.count--
}
if (data.count === 0) {
data.checked = false
}
},
//增加購買
add(data) {
data.count++
},
//修改商品
xiu(i) {
this.int = i
if (!this.dis1 == false) {
this.dis1 = false
} else {
this.dis1 = true
}
},
// 確認修改
xiugai() {
console.log(this.int)
let index = this.int
console.log(this.name, this.price, this.count, )
this.shopPings[index].name = this.name
this.shopPings[index].price = this.price
this.shopPings[index].counrty = this.counrty
this.shopPings[index].count = this.count
this.dis1 = false
},
//降序
jiang() {
this.shopPings.sort((a, b) => {
//排序基于的數(shù)據(jù)
return a.price - b.price;
})
},
search() {
if (!this.input_value) {
return alert('請輸入內(nèi)容')
}
if (
this.shopPings.every((v) => {
v.name.indexOf(this.input_value) == -1
})
) {
this.input_value = ''
return alert('沒有此商品')
}
this.shopPings = this.shopPings.filter((v) => {
v.name.replace(this.input_value, this.input_value)
return v.name.indexOf(this.input_value) != -1
})
}
}
}
</script>
總結(jié)
到此這篇關于vue實現(xiàn)購物車全部功能的文章就介紹到這了,更多相關vue實現(xiàn)購物車功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
ElementUI中的el-dropdown傳入多參數(shù)的實現(xiàn)方法
本文主要介紹了ElementUI中的el-dropdown傳入多參數(shù)的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
vue父組件給子組件的組件傳值provide inject的方法
在本篇文章里小編給大家整理的是一篇關于vue父組件給子組件的組件傳值provide inject的方法，需要的朋友們學習下。2019-10-10
這篇文章主要為大家詳細介紹了vue3封裝輪播圖組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
混入(mixin)提供了一種非常靈活的方式，來分發(fā)vue組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項2022-08-08
這篇文章主要介紹了vue項目實現(xiàn)多語言切換的思路，幫助大家完成多語言翻譯，感興趣的朋友可以了解下2020-09-09
Mixin是面向?qū)ο蟪绦蛟O計語言中的類,提供了方法的實現(xiàn),其他類可以訪問mixin類的方法而不必成為其子類在Vue中,可以使用mixin來擴展組件的功能,本文給大家介紹了Vue中如何使用mixin擴展組件功能,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue3動態(tài)添加路由,文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要給大家介紹了關于vue中組件傳參的幾種常用方法,Vue組件傳參方也是面試最常考的內(nèi)容,文中通過代碼實例介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)5
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了vue3之向echarts組件傳值的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03