首页vue编写一个简单的商品表格

vue编写一个简单的商品表格

时间: 2024-09-22 15:07:39 浏览: 65

在Vue.js中创建一个简单的商品表格，首先你需要安装Vue和Vue Router等必要的库。假设你已经有一个包含商品数据的`products`数组。下面是一个基础的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 商品表格</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Price</th> </tr> </thead> <tbody> <tr v-for="(product, index) in products" :key="index"> <td>{{ product.id }}</td> <td>{{ product.name }}</td> <td>{{ product.price }}</td> </tr> </tbody> </table> </div> <script> new Vue({ el: '#app', data: { products: [ { id: 1, name: '商品1', price: '$10' }, { id: 2, name: '商品2', price: '$20' }, { id: 3, name: '商品3', price: '$30' } ] } }); </script> </body> </html> ``` 在这个例子中： 1. 我们使用了`v-for`指令遍历`products`数组，为每一行生成一个新的表格行。 2. `{{ }}`语法用于插值表达式，显示产品的属性值。

阅读全文