使用vue模拟购物车全选按钮,逻辑
<template><div><table border="1"><tr><td><input type="checkbox" @click="Allselect" v-model=&q
·
<template>
<div>
<table border="1">
<tr>
<td>
<input type="checkbox" @click="Allselect" v-model="Allchecked">全选
</td>
</tr>
<div v-for="(val,index) in objArray" :key="index">
<tr>
<td>
<input type="checkbox" :value="val.name" v-model="val.ischecked" @click="addlist(val)">
</td>
<td> {{ index}}</td>
<td>商品名称:{{val.name}}</td>
<td>价格:{{val.price}}</td>
<td>标题:{{val.title}}</td>
<td>
<img :src="val.img">
</td>
<td class="last">
<button>删除</button>
<br>
<button @click="add(val)">+</button>
<button @click="sub(val)">-</button>
<span>{{val.num}}</span>
</td>
</tr>
</div>
</table>
<br>
<span style="color:red;font-size:20px;margin-left:20px">总价:{{price}}</span>
</div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex'
import store from './store'
import UserModule from './store/index'
export default {
name: "Market",
data() {
return {
price: 0,
Allchecked: false,
number: 0,
list: [],
objArray: [
{
ischecked: false,
id: 1,
num: 0,
name: "范冰冰",
price: 10000,
title: "气场女王,漂亮大气",
img:
"https://assets.2dfire.com/frontend/7b0b6ac483cb0b1bc681eef6e559a161.jpg"
},
{
ischecked: false,
id: 2,
num: 0,
name: "古天乐",
price: 9999,
title: "男人味十足",
img:
"https://assets.2dfire.com/frontend/9e5cfb05270dd3e29874e869d595ec40.jpg"
},
{
ischecked: false,
id: 3,
num: 0,
name: "李晨",
price: 100,
title: "Man型男",
img:
"https://assets.2dfire.com/frontend/8639997db3f70957df987f3f5b4dfcae.jpg"
}
]
}
},
methods: {
addlist(val) {
console.log(this.$store)
// this.list.forEach(item => {
// //遍历prodAllPrice这个字段,并累加
// sum += item.prodAllPrice;
// });
if (!val.ischecked) {
this.list.push(val.name);
} else {
this.index = this.list.indexOf(val.name);
this.list.splice(this.index, 1);
}
if (this.list.length === this.objArray.length) {
this.Allchecked = true;
} else {
this.Allchecked = false;
}
console.log(this.list)
},
add(val) {
val.num += 1;
},
sub(val) {
val.num -= 1;
},
Allselect() {
if (this.list.length === this.objArray.length) {
for (this.i = 0; this.i < this.objArray.length; this.i++) {
this.objArray[this.i].ischecked = false;
this.list = [];
}
} else {
this.list = [];
for (this.i = 0; this.i < this.objArray.length; this.i++) {
this.objArray[this.i].ischecked = true;
this.list.push(this.objArray[this.i].name);
}
}
}
},
computed:{
co:function(){
console.log(this.val)
}
}
};
</script>
<style>
* {
font-size: 10px;
}
table td {
width: 50px;
}
img {
width: 50px;
vertical-align: middle;
}
.last {
width: 100px;
}
</style>
更多推荐
已为社区贡献6条内容
所有评论(0)