vue实现购物车全部功能的简单方法
更新时间：2021年07月06日 10:49:34 作者：老张在线敲代码
vue是前端轻量级MVVM框架,入门门槛相对较低,今天用Vue做一个购物车实例,所以下面这篇文章主要给大家介绍了关于vue实现购物车全部功能的简单方法,需要的朋友可以参考下
主要功能如下：
- 增加商品信息
- 修改商品信息
- 删除单个商品
- 删除多个商品
- 清空购物车
- 对商品单价进行降序排序
- 根据商品名称实现查找
- 实现商品数量加减
- 全选反选
- 实现勾选商品的总价计算
效果图如下：
由于功能比较多就不一个个讲了，我们先来讲几个主要功能的逻辑（增删改查），最后放全放部代码
首先我们先来看增加商品功能
//先来一个按钮绑定显示事件，点击添加后出现一个弹窗 <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到一个新的数组中，添加完成之后关闭弹窗
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
},
商品增加进去之后突然发现商品信息写错了！！？？不要慌，接下来带大家看看修改功能
还是老规矩先定义一个按钮绑定显示事件，然后绑定显示事件，除了事件名称之外，跟上面添加类同，我们直接来看确认修改功能
//定义按钮绑定事件
<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);
},
清空购物车的话就比较简单了直接设置按钮点击后数组为空即可
alldel() {
this.shopPings = []
},
最后我们来看一下购物车中的查询功能
//return中设置input的value值 //定义一个input框，绑定value值，设置enter键盘事件并且绑定搜索事件 <input type="text" placeholder="请输入要查询的商品名称" v-model="input_value" @keyup.13="search">
具体看注释
//先来一个判断判断搜索框为空的时候进行查询会有提示信息不允许为空
//然后拿到数组中的每一项的名称进行查找如果没有这个商品名称则提示没有该商品
//最后对数组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="数量" 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="数量" 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>数量</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)}`
//在金额前面插入一个￥符号然后定义小数点后面为俩位数字
}
},
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: "", //数量
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) => {
//排序基于的数据
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实现购物车全部功能的文章就介绍到这了,更多相关vue实现购物车功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于vue项目中使用scss的详细方法步骤,scss是一种css预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性,让css更加简洁、适应性更强,可读性更佳,需要的朋友可以参考下2023-11-11
轮播图在开发中是经常用到的,3D轮播图是其中最常用的一种,所以在这篇文章中将给大家介绍Vue + AnimeJS实现3d轮播图,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下2024-01-01
在前端开发中,经常需要打印页面的特定部分,比如客户列表或商品详情页,要快速实现这些功能,可以使用 vue3-print-nb 插件,本文就给大家介绍了如何在 Vue 3 中使用 vue3-print-nb 实现灵活的前端打印,需要的朋友可以参考下2024-06-06
这篇文章主要为大家详细介绍了如何基于Vue实现简单的消息提示功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-10-10
这篇文章主要为大家介绍了Vue transx组件切换动画库示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了element el-table 表格限制多选个数功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
vue中的attribute和property的具体使用及区别
本文主要介绍了vue中的attribute和property的具体使用及区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
这篇文章主要介绍了详解webpack打包vue项目之后生成的dist文件该怎么启动运行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了vue如何使用外部特殊字体的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected&n
这篇文章介绍了解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜ 报错的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
最新评论