Vue实现简单的购物车功能

最新推荐文章于 2024-05-14 22:14:15 发布

原创

最新推荐文章于 2024-05-14 22:14:15 发布 · 1.9k 阅读

收录于

本文通过Vue展示了如何实现添加商品到购物车的功能。详细介绍了父组件list.vue、子组件cart.vue、路由配置、App.vue组件和main.js的代码实现过程。

本文主要运用vue实现了添加商品，以及一个简单的购物车功能，代码如下

首先看下基本的实现效果：
在这里插入图片描述
在input输入课程和价格，点击添加课程后：

点击添加到购物车后：

那么，接下来我们看看具体的代码吧~
父组件list.vue的代码

<template>
  <div>
    <div>
      课程：
      <input type="text" v-model="courseInfo.couseName" />
      价格：
      <input type="text" v-model="courseInfo.cousePrice" />
      <button @click="addCourse">添加课程</button>

      <ul>
        <li v-for="(item,index) in list" :key="index">
          课程名称：{
   
   {
   
   item.couseName}}--------
          课程价格：{
   
   {
   
   item.cousePrice}}
          <button @click="addCart(item.id,index)">添加到购物车</button>
        </li>
      </ul>
    </div>

    <Cart :itemlist="itemList" @removeItem="remove"></Cart>
  </div>
</template>

<script>
//导入子组件cart.vue
import Cart from "./cart"

export default {
   
   
  data() {
   
   
    return {
   
   
      myId: 3,
      itemList:[],
      courseInfo: {
   
   
        couseName: "",
        cousePrice: "",
      },
      list: [
        {
   
   
          id: 1,
          couseName: "Python人工智能",
          cousePrice: 25000,
        },
        {
   
   
          id: 2,
          couseName: "前端",
          cousePrice: 20000,
        },
        {
   
   
          id: 3,
          couseName: "java",
          cousePrice: