vue简单实现购物车结算功能
作者：Amnesia�
这篇文章主要为大家详细介绍了vue简单实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue简单实现购物车结算的具体代码，供大家参考，具体内容如下
样式没有写
<template>
<div class="about container">
<button class="btn btn-default">
<router-link to="/customers">返回主页</router-link>
</button>
<button>获取数据</button>
<ul>
<li v-for="(item,index) in this.list" :key="index">
<div>
<input type="checkbox" v-model="item.checked" />
<span>{{item.title}}</span>
<button class="btn btn-default" @click="reduce(index)">-</button>
<span>{{item.num}}</span>
<button class="btn btn-default" @click="add(index)">+</button>
<span>价格：{{item.price}}</span>
<button @click="del(index,item._id)" class="btn btn-default">删除</button>
</div>
</li>
</ul>
<input type="checkbox" v-model="allcheck" @click="checkall" />
<button>合计:{{totalMoney}}</button>
</div>
</template>
<script>
export default {
name: "about",
// 调用app.vue组件中的方法
inject: ["reload"],
data() {
return {
list: [],
allcheck: false
};
},
methods: {
async getproduct() {
const res = await this.$http.get("/goodslist");
this.list = res.data;
localStorage.setItem("shoppingcart", JSON.stringify(this.list));
console.log(this.list);
},
add(i) {
this.list[i].num++;
},
reduce(i) {
if (this.list[i].num <= 1) {
this.list[i].num = 0;
return;
}
this.list[i].num--;
},
checkall() {
// console.log(this.allcheck);
console.log(event.target.checked);
this.list.forEach(item => {
item.checked = event.target.checked;
// console.log(item._id)
});
},
async del(i, id) {
const res = await this.$http.delete("/delfile/" + id);
console.log(res);
this.reload();
}
},
computed: {
totalMoney() {
let allmoney = 0;
let isAllCheck = true;
for (let i in this.list) {
if (this.list[i].checked) {
allmoney += this.list[i].price * this.list[i].num;
} else {
isAllCheck = false;
}
}
this.allcheck == isAllCheck;
return allmoney;
}
},
created() {
this.getproduct();
}
};
</script>
<style>
li {
list-style: none;
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。