vue商品分类选择一排放置代码

下面是一个简单的示例，使用 Vue.js 实现了商品分类选择一排放置：

<template>
  <div>
    <ul>
      <li v-for="category in categories" :key="category.id"
          :class="{ active: activeCategoryId === category.id }"
          @click="selectCategory(category.id)">
        {{ category.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeCategoryId: null,
      categories: [
        { id: 1, name: '电子产品' },
        { id: 2, name: '家居用品' },
        { id: 3, name: '食品饮料' },
        { id: 4, name: '服饰配饰' },
      ],
    };
  },
  methods: {
    selectCategory(categoryId) {
      this.activeCategoryId = categoryId;
      // 根据所选分类加载商品列表等操作
    },
  },
};
</script>

<style>
  .active {
    font-weight: bold;
  }
</style>

以上代码定义了一个包含多个商品分类的列表，当用户点击某个分类时，该分类的样式会变为加粗，同时可以根据所选分类加载商品列表等操作。