vue入门小案例（简单的购物车应用）

YCY866

于 2024-03-19 08:45:49 发布

阅读量598

点赞数 12

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_76478257/article/details/136822928

版权

vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Vue.js构建一个基础的购物车应用，包括HTML结构的设置、Vue实例的创建、数据模型定义以及添加和移除商品的方法。通过v-for指令实现商品列表和购物车的渲染，展示了Vue.js的数据绑定和事件处理功能。

摘要由CSDN通过智能技术生成

案例：简单的购物车应用

我们将创建一个简单的购物车应用，用户可以添加商品到购物车，并查看购物车中的商品。

HTML 结构

首先，创建一个 HTML 文件，并设置基本的结构和 Vue 实例的挂载点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 入门案例 - 购物车应用</title>
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>购物车</h1>
        <ul>
            <li v-for="item in products" :key="item.id">
                {{ item.name }} - {{ item.price }}
                <button @click="addToCart(item)">添加到购物车</button>
            </li>
        </ul>

        <h2>购物车:</h2>
        <ul>
            <li v-for="item in cart" :key="item.id">
                {{ item.name }} - {{ item.price }}
                <button @click="removeFromCart(item)">移除</button>
            </li>
        </ul>
    </div>

    <script>
        // 接下来，我们将在这里编写 Vue 实例的代码
    </script>
</body>
</html>

Vue 实例和数据绑定

在 <script> 标签内，我们将创建 Vue 实例，并定义数据模型和方法：

new Vue({
    el: '#app',
    data: {
        products: [
            { id: 1, name: '商品A', price: '$10' },
            { id: 2, name: '商品B', price: '$15' },
            { id: 3, name: '商品C', price: '$20' }
        ],
        cart: []
    },
    methods: {
        addToCart: function(product) {
            this.cart.push(product);
        },
        removeFromCart: function(item) {
            this.cart = this.cart.filter(cartItem => cartItem.id !== item.id);
        }
    }
});

在这个例子中，我们定义了两个主要的部分：