Vue购物车的小案例
案例介绍:
这个购物车案例呢4个部分:1、删除选中;2、全选,分选,3、数量影响价格;4、显示所有选中商品总价
<template>
<div>
<table>
<tr border='1'>
<td>
<span>全选</span>
<input type="checkbox" @change="all" v-model="flag">
</td>
<td>商品</td>
<td>数量</td>
<td>单价</td>
<td>金额(元)</td>
<td>操作</td>
</tr>
<tr v-for="(item,key) in list" :key="key">
<td>
<input type="checkbox" v-model="arr" :value="item.id">
</td>
<td class="td">
<div>
<img :src="'/static/img/' + item.img" alt="">
</div>
<div>
{{item.name}}
</div>
</td>
<td>
<button @click="subtract(key)">-</button>
{{item.num}}
<button @click="add(key)">+</button>
</td>
<td>${{item.price}}</td>
<td>${{item.num*item.num}}</td>
<td>
<button @click="del(key)">删除</button>
</td>
</tr>
</table>
<button @click="xdel()">选中删除</button>
<div>
<span>商品总计:</span>
{{getcount}}
</div>
<div>
<span @click="js">结算</span>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:'Cart',
data() {
return {
list:null,
arr:[],
flag:false,
newAdd:[]
}
},
mounted() {
//这里呢是自己本地模拟的json,使用axios请求
axios({
url:'/static/goods.json',
methods:'get',
}).then(res => {
this.list = res.data;
})
},
methods: {
//删除,通过splice这个方法,使用传过来的每个商品的下标删除相对应的商品
del(key) {
this.list.splice(key,1)
},
//加
add(key) {
this.list[key].num++
},
//减
subtract(key) {
this.list[key].num--;
if(this.list[key].num<=0) {
if(confirm("是否要删除商品")) {
this.list.splice(key,1);
}else {
this.list[key].num = 1;
}
}
},
//全选反选
//思路:1、设置一个flag 关联控制列表的复选框
//2、给控制列表的复选框添加chang事件,
//当值发生改变的时候判断flag的值,
//如果是true将列表中的所有id存储到arr中,如果是false,
//将arr置为空
all() {
this.arr=[];
if(this.flag) {
this.list.forEach(item=>{
this.arr.push(item.id)
})
}else{
this.arr=[]
}
},
// 选中删除
//思路:
//1、//设置空数组arr,让列表选项复选框关联这个数组,
//给列表的复选框绑定value属性是item.id,
//那么在数组中存储的就是我选中列表的id
//2、可以给button设置点击事件,进行删除元素
//要遍历arr,然后再遍历list,如果id相等进行删除
xdel() {
this.arr.forEach(item=>{
this.list.forEach((it,k)=>{
if(item == it.id) {
this.list.splice(k,1);
}
})
})
},
//结算
js() {
this.arr.forEach(item=>{
this.newAdd.push(item)
this.newAdd = this.arr = [];
})
}
},
//计算商品的价钱
computed: {
getcount() {
let sum = 0;
for(let i in this.arr) {
for(let j in this.list) {
if(this.arr[i] == this.list[j].id) {
sum+=this.list[j].price*this.list[j].num
}
}
}
return sum;
}
},
// 监听arr数组的长度的变化
watch:{
//在这里我们要给arr设置监听事件 如果arr的长度和list的长度相等,
//将flag设置为true,如果不相等设置为false
arr:{
handler(val) {
if(val.length == this.list.length) {
this.flag = true
}else {
this.flag = false
}
}
}
}
}
</script>
<style scoped>
table {
width: 70%;
text-align: center;
margin: 0 auto;
}
tr{
border: 1px solid black;
}
td>img {
width: 60px;
height: 60px;
}
.td {
display: flex;
align-items: center;
justify-content: space-around
}
</style>