不仅仅有计算价格功能,以及有删除功能,批量删除功能,全选框,商品数量加减,商品增加(因为是模拟,所以我就设了几个输入框新增)。
实时计算购物车价格,使用vue的生命周期,进行计算,先放两张效果图
然后我进行新增商品和改变数量,注意总价格(图片不显示是因为我乱写的)
下面是我的代码:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>增减购物车商品信息 </title>
<script src="/vue.js"></script>
<script src="/axios-0.18.0.js"></script>
<style type="text/css">
* {
font-size: 12px;
}
</style>
</head>
<body>
<div id="baba">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th><input type='checkbox' @click="changeAll" v-model="allcheck" />全选</th>
<th>商品信息</th>
<th>宜美惠价</th>
<th>数量</th>
<th>操作</th>
</tr>
<tbody v-for="(value, key) in object" :key="key">
<tr class="tr_0">
<td>
<input type="checkbox" v-model="value.ischeck" @click="changeOne(key)" />
</td>
<td>
<img v-bind:src="value.godImg" class="products" /><a href="#">{{value.godName}}</a>
</td>
<td>¥{{value.godPrice}}元
</td>
<td>
<img src="images/subtraction.gif" width="20" height="20" @click="jian(key,value.godNum)" />
<input type="text" class="quantity" v-bind:value="value.godNum" v-model.number="value.godNum" />
<img src="images/add.gif" width="20" height="20" @click="jia(key,value.godNum)" />
</td>
<td>
<a href="#" class="del" @click="del(key)">删除</a>
</td>
</tr>
</tbody>
</table>
<a href="#" class="add" @click="add()">添加</a>
<a href="#" @click="dele">删除</a>
<a>总价格</a>{{total}}<br>
商品名称:<input type="text" v-model="name"><br>
商品图片:<input type="text" v-model="img"><br>
商品价格:<input type="text" v-model="price"><br>
商品数量:<input type="text" v-model="num"><br>
</div>
<script>
new Vue({
el: '#baba',
data() {
return {
object: [
{
godId: 001,
godName: '天堂雨伞',
godPrice: 32.9,
godNum: 1,
ischeck: false, //默认为false
godImg: 'images/sang.gif'
},
{
godId: 002,
godName: '苹果手机iphone5',
godPrice: 3339,
godNum: 1,
ischeck: false, //默认为false
godImg: 'images/iphone.gif'
}
],
allcheck: false,
id: '',
name: '',
price: '',
num: '',
img: '',
total: 0
}
},
methods: {
jian: function (key, num) {//减数量 key需要减数量的对象下标
if (num <= 1) {
alert("不能再减了")
} else {
this.object[key].godNum = this.object[key].godNum - 1;
}
},
jia: function (key, num) {//加数量 key需要加数量的对象下标
this.object[key].godNum = this.object[key].godNum + 1;
},
del: function (key) {//删除方法
this.object.splice(key, 1);//删除已完成的数组记录
},
//点击购物车数据中单选框改变ischeck事件
changeOne: function (index) {
this.object[index].ischeck = !this.object[index].ischeck;//用户点击单个,将值变成true
//判断全选框是否选中
/* findIndex() 方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1 */
let _index = this.object.findIndex(item => {
return !item.ischeck
})
//_index..值由ischeck决定,当ischeck为false时,!ischeck就是ture,ischeck=true(就是代表选中了)时,_index+1
//当所有ischeck都为ture(就是都选了),则返回-1
if (_index == -1) {
this.allcheck = true;
} else {
this.allcheck = false;
}
},
changeAll: function () {
//取反
this.allcheck = !this.allcheck
// 遍历数组arr
this.object.forEach(item => {
return item.ischeck = this.allcheck;
})
},
add: function () {//新增商品方法
let l = this.object.length;
this.object.push({
godId: this.id,
godName: this.name,
godPrice: this.price,
godNum: this.num,
ischeck: false,
godImg: this.img
});
let i = this.object.length;
if (i > l) {
alert("添加成功");
}
},
dele: function () {
//说明:数组的filter还有删除的功能,过滤就是筛选,删除不符合条件的,留下符合条件的,
//filter括号内部理解成留下符合条件的,本质也是逐个遍历,利用for if判断,组成新的数组,以后遇到这样的情况,就用filter
this.object = this.object.filter(god => !god.ischeck)
}
},
//生命周期:一进来就计算价格
mounted: function () {
var arr = [];//定义数组准备接收所有单个商品的总价格
this.object.forEach(item => {//循环
return arr.push(item.godPrice * item.godNum);//写入数组所有单个商品的总价格
})
var sum = arr.reduce((x, y) => x + y);//计算总价格
this.total = sum;
},
//生命周期:只要任何数据更新,就会执行这个方法更新价格
beforeUpdate: function () {
var arr = [];//定义数组准备接收所有单个商品的总价格
this.object.forEach(item => {//循环
return arr.push(item.godPrice * item.godNum);//写入数组所有单个商品的总价格
})
var sum = arr.reduce((x, y) => x + y);//计算总价格
this.total = sum;
},
})
</script>
</body>
</html>