今天学习了springboot的后端的开发。
明天完成:web端的前端Vue的购物前端界面
<template> <div> <h2>我的购物车</h2> <ul> <li v-for="item in cartItems" :key="item.id"> <span>{{ item.name }}</span> <span>¥{{ item.price }}</span> <button @click="removeItem(item)">删除</button> </li> </ul> <div> <h2>商品列表</h2> <ul> <li v-for="item in items" :key="item.id"> <span>{{ item.name }}</span> <span>¥{{ item.price }}</span> <button @click="addItem(item)">加入购物车</button> </li> </ul> </div> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: '商品1', price: 100 }, { id: 2, name: '商品2', price: 200 }, { id: 3, name: '商品3', price: 300 } ], cartItems: [] }; }, methods: { addItem(item) { if (!this.cartItems.find((i) => i.id === item.id)) { this.cartItems.push(item); } }, removeItem(item) { const index = this.cartItems.findIndex((i) => i.id === item.id); if (index >= 0) { this.cartItems.splice(index, 1); } } } }; </script>
遇到的问题:Vue的数据来源 jsion