首页vue简单实习购物车案例

vue简单实习购物车案例

时间: 2023-09-12 12:09:41 浏览: 114

当然可以！下面是一个简单的 Vue.js 实现的购物车案例： ```html <!DOCTYPE html> <html> <head> <title>Vue Shopping Cart</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>购物车</h2> <ul> <li v-for="item in cartItems"> {{ item.name }} - ${{ item.price }} <button @click="removeItem(item)">删除</button> </li> </ul> <h3>总计: ${{ total }}</h3> <input type="text" v-model="newItem.name" placeholder="商品名称"> <input type="number" v-model="newItem.price" placeholder="商品价格"> <button @click="addItem">添加到购物车</button> </div> <script> var app = new Vue({ el: '#app', data: { cartItems: [ { name: '商品1', price: 10 }, { name: '商品2', price: 20 } ], newItem: { name: '', price: 0 } }, methods: { addItem: function() { this.cartItems.push({ name: this.newItem.name, price: this.newItem.price }); this.newItem.name = ''; this.newItem.price = 0; }, removeItem: function(item) { var index = this.cartItems.indexOf(item); this.cartItems.splice(index, 1); } }, computed: { total: function() { var sum = 0; for (var i = 0; i < this.cartItems.length; i++) { sum += this.cartItems[i].price; } return sum; } } }); </script> </body> </html> ``` 这是一个简单的购物车案例，使用了 Vue.js 实现。用户可以通过输入商品名称和价格，然后点击"添加到购物车"按钮，将商品添加到购物车中。购物车中的商品可以显示出来，并且可以通过点击"删除"按钮来移除商品。页面上还会显示购物车中商品的总价。注意：这只是一个简单的示例，实际项目中可能需要更多的功能和逻辑处理。希望对你有帮助！如果有任何疑问，请随时提问。

阅读全文