当前位置：首页 > VUE

vue实现品牌列表

2026-03-30 02:09:12VUE

实现品牌列表的步骤

数据准备

在Vue项目中，品牌列表数据可以存储在组件的data属性中，或通过API从后端获取。以下是静态数据的示例：

data() {
  return {
    brands: [
      { id: 1, name: 'Nike', logo: 'nike.png' },
      { id: 2, name: 'Adidas', logo: 'adidas.png' },
      { id: 3, name: 'Puma', logo: 'puma.png' }
    ]
  }
}

模板渲染

使用v-for指令循环渲染品牌列表。在模板中添加以下代码：

<template>
  <div class="brand-list">
    <div v-for="brand in brands" :key="brand.id" class="brand-item">
      <img :src="brand.logo" :alt="brand.name">
      <span>{{ brand.name }}</span>
    </div>
  </div>
</template>

样式设计

为品牌列表添加CSS样式，确保布局美观。以下是一个简单的样式示例：

vue实现品牌列表

.brand-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
}

.brand-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

动态数据加载

若需从API获取数据，可在created或mounted钩子中调用方法：

methods: {
  async fetchBrands() {
    try {
      const response = await axios.get('/api/brands');
      this.brands = response.data;
    } catch (error) {
      console.error('Error fetching brands:', error);
    }
  }
},
mounted() {
  this.fetchBrands();
}

分页功能

对于大量数据，可添加分页功能。在data中定义分页变量：

vue实现品牌列表

data() {
  return {
    currentPage: 1,
    itemsPerPage: 10
  }
}

计算属性实现分页逻辑：

computed: {
  paginatedBrands() {
    const start = (this.currentPage - 1) * this.itemsPerPage;
    return this.brands.slice(start, start + this.itemsPerPage);
  }
}

搜索过滤

添加搜索框实现品牌过滤功能：

<input v-model="searchQuery" placeholder="Search brands">

在计算属性中实现过滤：

computed: {
  filteredBrands() {
    return this.brands.filter(brand => 
      brand.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
  }
}