首页vue前端微商城代码

vue前端微商城代码

时间: 2024-12-06 11:15:52 浏览: 64

Vue.js 是一个流行的前端框架，特别适合用于构建单页面应用程序（SPA）。在前端微商城项目中，Vue.js 可以帮助开发者快速构建高效、响应式的用户界面。以下是一个简单的 Vue 前端微商城代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue 微商城</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <h1>{{ title }}</h1> <div v-for="product in products" :key="product.id"> <h2>{{ product.name }}</h2> <p>{{ product.description }}</p> <p>价格: {{ product.price }}</p> <button @click="addToCart(product)">加入购物车</button> </div> <h2>购物车</h2> <div v-for="item in cart" :key="item.id"> <p>{{ item.name }} - {{ item.price }}</p> </div> </div> <script> new Vue({ el: '#app', data: { title: '我的微商城', products: [ { id: 1, name: '产品1', description: '这是产品1的描述', price: 100 }, { id: 2, name: '产品2', description: '这是产品2的描述', price: 200 }, { id: 3, name: '产品3', description: '这是产品3的描述', price: 300 } ], cart: [] }, methods: { addToCart(product) { this.cart.push(product); } } }); </script> </body> </html> ``` 这个示例展示了如何使用 Vue.js 创建一个简单的微商城应用。主要功能包括： 1. 显示产品列表 2. 显示每个产品的详细信息 3. 将产品添加到购物车

阅读全文