vue实现购物车的小练习

Vue实现购物车的小练习是一个非常适合新手练手的小项目。 在这个练习中，我们将使用Vue.js框架来实现一个简单的购物车系统。下面是这个项目的完整攻略：

步骤1：准备项目

在开始之前，我们需要确保已经安装好了Vue.js库。我们可以通过以下方式进行安装：

npm install vue

步骤2：创建购物车组件

购物车组件是整个项目的核心，它需要完成的功能有：

• 展示购物车中的商品列表
• 提供增加/减少商品数量和删除商品的功能
• 展示购物车中商品的总价和总数量

示例代码如下：

<template>
    <div>
        <div v-for="(product, index) in products" :key="index">
            {{ product.name }} - {{ product.price }}元
            <button @click="increment(index)">+</button>
            {{ product.quantity }}
            <button @click="decrement(index)">-</button>
            <button @click="removeProduct(index)">X</button>
        </div>
        <p>总价: {{ totalPrice }}元</p>
        <p>购买总数: {{ totalQuantity }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            products: [
                { name: "可乐", price: 5, quantity: 0 },
                { name: "矿泉水", price: 2, quantity: 0 },
                { name: "雪碧",  price: 4, quantity: 0 },
            ]
        }
    },
    computed: {
        totalPrice() {
            let total = 0;
            this.products.forEach(product => {
                total += product.price * product.quantity;
            });
            return total;
        },
        totalQuantity() {
            let total = 0;
            this.products.forEach(product => {
                total += product.quantity;
            });
            return total;
        }
    },
    methods: {
        increment(index) {
            this.products[index].quantity++;
        },
        decrement(index) {
            if (this.products[index].quantity > 0) {
                this.products[index].quantity--;
            }
        },
        removeProduct(index) {
            this.products.splice(index, 1);
        }
    }
}
</script>

步骤3：在页面中引入购物车组件

在我们使用购物车组件之前，需要将其引入到我们的App.vue组件中。示例代码如下：

<template>
    <div>
        <cart></cart>
    </div>
</template>

<script>
import Cart from './components/Cart.vue';
export default {
    components: {
        Cart
    }
}
</script>

步骤4：交互

现在，我们的购物车组件已经可以在页面上展示了，但是还不能交互。我们需要在页面中添加几个按钮，实现增加/减少商品数量和删除商品的功能。示例代码如下：

<template>
    <div>
        <div v-for="(product, index) in products" :key="index">
            {{ product.name }} - {{ product.price }}元
            <button @click="increment(index)">+</button>
            {{ product.quantity }}
            <button @click="decrement(index)">-</button>
            <button @click="removeProduct(index)">X</button>
        </div>
        <p>总价: {{ totalPrice }}元</p>
        <p>购买总数: {{ totalQuantity }}</p>
        <button @click="addProduct">添加商品</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            products: [
                { name: "可乐", price: 5, quantity: 0 },
                { name: "矿泉水", price: 2, quantity: 0 },
                { name: "雪碧",  price: 4, quantity: 0 },
            ]
        }
    },
    computed: {
        totalPrice() {
            let total = 0;
            this.products.forEach(product => {
                total += product.price * product.quantity;
            });
            return total;
        },
        totalQuantity() {
            let total = 0;
            this.products.forEach(product => {
                total += product.quantity;
            });
            return total;
        }
    },
    methods: {
        increment(index) {
            this.products[index].quantity++;
        },
        decrement(index) {
            if (this.products[index].quantity > 0) {
                this.products[index].quantity--;
            }
        },
        removeProduct(index) {
            this.products.splice(index, 1);
        },
        addProduct() {
            this.products.push({
                name: "新商品",
                price: 10,
                quantity: 0,
            });
        }
    }
}
</script>

以上就是Vue实现购物车的小练习的完整攻略，希望对您有帮助。