vue實現(xiàn)購物車全部功能的簡單方法
更新時間：2021年07月06日 10:49:34 作者：老張在線敲代碼
vue是前端輕量級MVVM框架,入門門檻相對較低,今天用Vue做一個購物車實例,所以下面這篇文章主要給大家介紹了關于vue實現(xiàn)購物車全部功能的簡單方法,需要的朋友可以參考下
主要功能如下：
- 增加商品信息
- 修改商品信息
- 刪除單個商品
- 刪除多個商品
- 清空購物車
- 對商品單價進行降序排序
- 根據商品名稱實現(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根據下標刪除一條
定義一個按鈕綁定事件，傳入一個index值最后splice根據下標刪除一條
<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('請輸入內容')
}
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="產地" 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="產地" 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>產地</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: "", //產地
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ù)據
return a.price - b.price;
})
},
search() {
if (!this.input_value) {
return alert('請輸入內容')
}
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>
總結
到此這篇關于vue實現(xiàn)購物車全部功能的文章就介紹到這了,更多相關vue實現(xiàn)購物車功能內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于vue項目中使用scss的詳細方法步驟,scss是一種css預處理語言,定義了一種新的專門的編程語言,編譯后形成正常的css文件,為css增加一些編程特性,無需考慮瀏覽器的兼容性,讓css更加簡潔、適應性更強,可讀性更佳,需要的朋友可以參考下2023-11-11
Vue + AnimeJS實現(xiàn)3d輪播圖的詳細代碼
輪播圖在開發(fā)中是經常用到的,3D輪播圖是其中最常用的一種,所以在這篇文章中將給大家介紹Vue + AnimeJS實現(xiàn)3d輪播圖,文中有詳細的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-01-01
在Vue3中使用vue3-print-nb實現(xiàn)前端打印功能
在前端開發(fā)中,經常需要打印頁面的特定部分,比如客戶列表或商品詳情頁,要快速實現(xiàn)這些功能,可以使用 vue3-print-nb 插件,本文就給大家介紹了如何在 Vue 3 中使用 vue3-print-nb 實現(xiàn)靈活的前端打印,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細介紹了如何基于Vue實現(xiàn)簡單的消息提示功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-10-10
這篇文章主要為大家介紹了Vue transx組件切換動畫庫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
element el-table 表格限制多選個數(shù)功能
這篇文章主要介紹了element el-table 表格限制多選個數(shù)功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
vue中的attribute和property的具體使用及區(qū)別
本文主要介紹了vue中的attribute和property的具體使用及區(qū)別，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
詳解webpack打包vue項目之后生成的dist文件該怎么啟動運行
這篇文章主要介紹了詳解webpack打包vue項目之后生成的dist文件該怎么啟動運行,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了vue如何使用外部特殊字體的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
解決VUE項目在IIS部署出現(xiàn)：Uncaught SyntaxError: Unexpected&n
這篇文章介紹了解決VUE項目在IIS部署出現(xiàn)：Uncaught SyntaxError: Unexpected token ＜ 報錯的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04