本文主要运用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&#