vue商品分类列表页面vue列表

vue商品分类列表页面 vue 列表

以下是一个基本的 Vue.js 商品分类列表页面的示例代码：

<template>  <div class="category-list">    <h1>商品分类列表</h1>    <ul>      <li v-for="item in categories" :key="item.id">        {{ item.name }}      </li>    </ul>  </div></template><script>export default {  data() {    return {      categories: [        { id: 1, name: "电子产品" },        { id: 2, name: "家居用品" },        { id: 3, name: "服装鞋帽" },        // 更多商品分类...      ],    };  },};</script><style scoped>.category-list {  width: 80%;  margin: 0 auto;}.category-list h1 {  text-align: center;}.category-list ul {  list-style: none;  padding: 0;}.category-list li {  border-bottom: 1px solid #ccc;  padding: 10px;}</style>

这个示例中，我们使用了 Vue.js 的 v-for 指令来遍历 categories 数组，并使用 :key 属性为每个分类设置一个唯一的标识符。在模板中，我们使用 <li> 标签和 v-for 指令来显示每个分类的名称。同时，我们还使用了 CSS 样式来美化页面的布局和样式。