<template>
<div class="about">
<div>
<table style="width: 1000px;">
<tr>
<!-- <th><h1>购物车</h1></th> -->
</tr>
<tr>
<th><input type="checkbox" @change="handleChange()" v-model="flag"></th>
<th>序号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr v-for="item in dataList">
<td><input type="checkbox" v-model="checkgroup" :value="item" @change="handleChange1()"></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="jian(item)">-</button>
{{ item.number }}
<button @click="item.number++">+</button>
</td>
<td>
<button @click="tel">删除</button>
</td>
</tr>
</table>
checkgroup:{{ checkgroup }}
<p>商品总价:{{ getsum() }} 元</p>
<!-- <p>商品总价:{{ goodsTotalPrice }}</p> -->
</div>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
checkgroup: [],
flag: false,
dataList: [{
'id': 1,
'name': '铅笔',
'price': 1,
'number': 100
},
{
'id': 2,
'name': '文具盒',
'price': 5,
'number': 25
},
{
'id': 3,
'name': '乒乓球',
'price': 10,
'number': 30
},
{
'id': 4,
'name': '篮球',
'price': 60,
'number': 0
},
{
'id': 5,
'name': '固体胶',
'price': 0.5,
'number': 500
},
{
'id': 6,
'name': '漫画',
'price': 10.5,
'number': 3
},
]
}
},
methods: {
// 全选全不选
handleChange() {
console.log('改变了', this.flag)
if (this.flag) {
this.checkgroup = this.dataList
} else {
this.checkgroup = []
}
},
// 反选
handleChange1() {
console.log('handleChange1 判断是不是都勾选或有一个未勾选')
if (this.checkgroup.length === this.dataList.length) {
this.flag = true
} else {
this.flag = false
}
},
// 总价/* */
getsum() {
var sum = 0
for (var i in this.checkgroup) {
sum += this.checkgroup[i].price * this.checkgroup[i].number
}
return sum
},
// 数量减
jian(item) {
console.log("减")
var number = item.number--
if (number === 1) {
item.number = 1
}
},
tel(t) {
console.log("删除")
}
}
}
</script>
js之购物车代码逻辑
最新推荐文章于 2024-04-15 15:42:58 发布