Vue实战——购物车案例
普通购物车
实现功能:添加商品到购物车,计算总价
购物车
th,td{
text-align: center;
}
购物车案例
商品名称
商品价格
商品数量
添加购物车
{{data.name}}
{{data.price}}
{{data.number}}
0">购物车:{{checkGroup}}
0" style="font-size: 20px">购物车:购物车为空
总价:{{totalPrice()}}
var vm = new Vue({
el: '#app',
data: {
//商品数据
dataList: [
{name: 'Python实战', price: 66, number: 2},
{name: 'Linux实战', price: 55, number: 1},
{name: 'Java实战', price: 77, number: 1},
],
//购物车
checkGroup: [],
},
methods: {
//计算总价
totalPrice(){
// 总价初始化
var total = 0
for (i in this.checkGroup){
console.log(i) // i是索引
total += this.checkGroup[i].price * this.checkGroup[i].number
}
return total
}
}
})
PS:各种形式的for循环
上面我们使用了for(数组/对象中的i)的形式,js中for循环的常用形式有四种
//方式一: i是索引,循环选中的商品,基于迭代的循环
for (i in this.checkGroup){
console.log(i) // i是索引
total += this.checkGroup[i].price * this.checkGroup[i].number
}
// 方式二: 基于索引的循环,最普通的
for (var i=0;i<this.checkGroup.length;i++) {
total += this.checkGroup[i].price * this.checkGroup[i].number
}
//方式三: 基于迭代 for of (es6)
for (v of this.checkGroup) {
total += v.price * v.number
}
// 方式四:forEach 可迭代对象(数组)的方法,数组而言v是值,i是索引
this.checkGroup.forEach(function(v,i){
this.checkGroup.forEach((v,i)=>{
total += v.price * v.number
})
高级购物车一键加入购物车功能实现
基于普通购物车的功能:一键添加购物车功能
通过v-model双向绑定实现,输入框绑定事件,否则选择真假
购物车
th,td{
text-align: center;
}
购物车案例
商品名称
商品价格
商品数量
全选/取消全选
{{data.name}}
{{data.price}}
{{data.number}}
0">购物车:{{checkGroup}}
0" style="font-size: 20px">购物车:购物车为空
总价:{{totalPrice()}}¥
是否全选:否 --- {{checkall}}
是否全选:是 --- {{checkall}}
var vm = new Vue({
el: '#app',
data: {
//商品数据
dataList: [
{name: 'Python实战', price: 66, number: 2},
{name: 'Linux实战', price: 55, number: 1},
{name: 'Java实战', price: 77, number: 1},
],
//购物车
checkGroup: [],
//全选,默认不全选
checkall:false
},
methods: {
//计算总价
totalPrice(){
// 总价初始化
var total = 0
for (i in this.checkGroup){
console.log(i) // i是索引
total += this.checkGroup[i].price * this.checkGroup[i].number
}
return total
},
//处理全选
handleAll(){
if (this.checkall){
//全选
this.checkGroup = this.dataList
}else {
this.checkGroup=[]
}
},
handleOne(){
//全选
if (this.checkGroup.length==this.dataList.length){
this.checkall=true
//不全选
}else {
this.checkall=false
}
}
}
})
货物数量加减法的实现
实现功能:通过加+、-样式控制商品数量的加减
注:库存情况暂不考虑,减少货品数量单独处理,解决减少量小于1的情况
购物车
th,td{
text-align: center;
}
购物车案例
商品名称
商品价格
商品数量
全选/取消全选
{{data.name}}
{{data.price}}
{{data.number}}
0">购物车:{{checkGroup}}
0" style="font-size: 20px">购物车:购物车为空
总价:{{totalPrice()}}¥
是否全选:否 --- {{checkall}}
是否全选:是 --- {{checkall}}
var vm = new Vue({
el: '#app',
data: {
//商品数据
dataList: [
{name: 'Python实战', price: 66, number: 2},
{name: 'Linux实战', price: 55, number: 1},
{name: 'Java实战', price: 77, number: 1},
],
//购物车
checkGroup: [],
//全选,默认不全选
checkall:false
},
methods: {
//计算总价
totalPrice(){
// 总价初始化
var total = 0
for (i in this.checkGroup){
console.log(i) // i是索引
total += this.checkGroup[i].price * this.checkGroup[i].number
}
return total
},
//处理全选
handleAll(){
if (this.checkall){
//全选
this.checkGroup = this.dataList
}else {
this.checkGroup=[]
}
},
handleOne(){
//全选
if (this.checkGroup.length==this.dataList.length){
this.checkall=true
//不全选
}else {
this.checkall=false
}
},
//商品减少
handleCount(data){
if (data.number<=1){
alert('不能再少了')
}
else {
data.number--
}
}
}
})
缺点:以下提示信息可以隐藏,个人仅供提示,产品删除不是自己写实现的
如有错误请指正谢谢~
© 版权声明
本站下载的源码均来自公开网络收集转发二次开发而来,
若侵犯了您的合法权益,请来信通知我们1413333033@qq.com,
我们会及时删除,给您带来的不便,我们深表歉意。
下载用户仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,访问及下载者下载默认同意本站声明的免责申明,请合理使用切勿商用。
THE END
暂无评论内容