vue实现购物车完整功能
作者：qlj224
这篇文章主要为大家详细介绍了vue实现购物车完整功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现购物车商品单选、全选及商品数量和总价计算，供大家参考，具体内容如下
效果展示
HTML
<template>
<div class="buyCar">
<header-bar
title="购物车商品"
:show-line="true"
/>
<div class="content">
<table>
<thead>
<tr>
<th>商品总数: {{ total }}</th>
<th>商品总价: {{ totalPrice }}</th>
<th>
<input
v-model="AllChecked"
type="checkbox"
@click="checkAll"
>
全选
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in list"
:key="index"
>
<td>{{ item.name }}</td>
<td>单价: {{ item.price }}</td>
<td>
<input
v-model="item.isChecked"
type="checkbox"
@click="check(item)"
>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>JS
<script>
import HeaderBar from '../components/header/index.vue';
export default {
name: 'BuyCar',
components: {
HeaderBar,
},
data() {
return {
list: [
{
name: '商品1',
price: 1111,
isChecked: false,
},
{
name: '商品2',
price: 2222,
isChecked: false,
},
{
name: '商品3',
price: 3333,
isChecked: false,
},
{
name: '商品4',
price: 4444,
isChecked: false,
},
{
name: '商品5',
price: 5555,
isChecked: false,
},
],
total: 0,
// 是否已全选
AllChecked: false,
};
},
computed: {
totalPrice() {
let prices = 0;
this.list.forEach(item => {
if (item.isChecked) {
prices += item.price;
}
});
return prices;
},
},
methods: {
// 单选
check(item) {
if (!item.isChecked) {
this.total++;
} else {
this.total--;
}
this.AllChecked = this.total === this.list.length;
},
// 全选和反选
checkAll() {
const AllChecked = this.AllChecked;
this.list.forEach(item => {
item.isChecked = !AllChecked;
});
this.AllChecked = !this.AllChecked;
this.total = this.AllChecked ? this.list.length : 0;
},
},
};
</script>CSS
<style lang="less" scoped>
.buyCar {
height: 100%;
display: flex;
flex-direction: column;
.content {
height: calc(100vh);
padding: 45px 15px 15px;
table {
text-align: center;
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
width: 200px;
height: 20px;
border: 1px solid #000;
}
input {
width: 20px;
height: 20px;
}
}
}
</style>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。