vue實現(xiàn)購物車完整功能

更新時間：2022年01月21日 10:28:26 作者：qlj224

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)購物車完整功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue實現(xiàn)購物車商品單選、全選及商品數(shù)量和總價計算，供大家參考，具體內(nèi)容如下

效果展示

HTML

<template>
? <div class="buyCar">
? ? <header-bar
? ? ? title="購物車商品"
? ? ? :show-line="true"
? ? />
? ? <div class="content">
? ? ? <table>
? ? ? ? <thead>
? ? ? ? ? <tr>
? ? ? ? ? ? <th>商品總數(shù): {{ 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: