写出完整代码并用css修饰
时间: 2023-07-25 10:47:01 浏览: 42
以下是一个简单的实现商品合集与表格绑定显示的Vue组件代码,并使用CSS样式进行修饰:
HTML模板代码:
```
<template>
<div class="product-list">
<table>
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="product in sortedProducts" :key="product.id">
<td>{{ product.id }}</td>
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
</tr>
</tbody>
</table>
</div>
</template>
```
CSS样式代码:
```
.product-list table {
width: 100%;
border-collapse: collapse;
}
.product-list th,
.product-list td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
.product-list th {
background-color: #f2f2f2;
font-weight: bold;
}
.product-list td:first-child {
font-weight: bold;
}
.product-list td:last-child {
font-weight: bold;
color: red;
}
```
JavaScript代码:
```
<script>
export default {
data() {
return {
products: [
{ id: 1, name: '商品1', price: 100 },
{ id: 2, name: '商品2', price: 200 },
{ id: 3, name: '商品3', price: 300 },
],
sortKey: 'id',
sortDesc: false
}
},
computed: {
sortedProducts() {
return this.products.sort((a, b) => {
let modifier = 1;
if (this.sortDesc) modifier = -1;
if (a[this.sortKey] < b[this.sortKey]) return -1 * modifier;
if (a[this.sortKey] > b[this.sortKey]) return 1 * modifier;
return 0;
});
}
}
}
</script>
```
在这个示例中,使用了computed属性来动态地对商品合集进行排序,并将排序后的结果绑定到表格中进行显示。CSS样式使用了一些基本的样式属性来美化表格的显示效果,例如表格边框、单元格内边距、单元格文本居中等。