vue实现品牌列表

使用Vue实现品牌列表

在Vue中实现品牌列表可以通过以下方法完成，涵盖数据绑定、组件化、API交互等核心功能。

数据准备与绑定

创建Vue实例或组件时，定义品牌数据数组，通常从API获取或本地模拟。使用v-for指令渲染列表。

<template>
  <div>
    <ul>
      <li v-for="brand in brands" :key="brand.id">
        {{ brand.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      brands: [
        { id: 1, name: 'Nike' },
        { id: 2, name: 'Adidas' }
      ]
    }
  }
}
</script>

动态获取品牌数据

通过axios或fetch从后端API获取品牌数据，通常在created或mounted生命周期钩子中发起请求。

<script>
import axios from 'axios';

export default {
  data() {
    return {
      brands: []
    }
  },
  async created() {
    try {
      const response = await axios.get('/api/brands');
      this.brands = response.data;
    } catch (error) {
      console.error('获取品牌数据失败:', error);
    }
  }
}
</script>

添加品牌筛选功能

通过计算属性或方法实现品牌搜索筛选，结合v-model绑定输入框。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索品牌">
    <ul>
      <li v-for="brand in filteredBrands" :key="brand.id">
        {{ brand.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      brands: [
        { id: 1, name: 'Nike' },
        { id: 2, name: 'Adidas' }
      ]
    }
  },
  computed: {
    filteredBrands() {
      return this.brands.filter(brand => 
        brand.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
}
</script>

使用组件化拆分

将品牌列表项抽离为独立组件，提升代码复用性。

<template>
  <div>
    <brand-item 
      v-for="brand in brands" 
      :key="brand.id" 
      :brand="brand"
    />
  </div>
</template>

<script>
import BrandItem from './BrandItem.vue';

export default {
  components: { BrandItem },
  data() {
    return {
      brands: [
        { id: 1, name: 'Nike' },
        { id: 2, name: 'Adidas' }
      ]
    }
  }
}
</script>

品牌项组件示例

创建BrandItem.vue文件，接收brand prop并渲染单个品牌信息。

<template>
  <div class="brand-item">
    <h3>{{ brand.name }}</h3>
  </div>
</template>

<script>
export default {
  props: {
    brand: {
      type: Object,
      required: true
    }
  }
}
</script>

添加分页功能

结合后端分页API，使用分页组件（如el-pagination）控制数据加载。

<template>
  <div>
    <ul>
      <li v-for="brand in brands" :key="brand.id">
        {{ brand.name }}
      </li>
    </ul>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalBrands"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalBrands: 0,
      brands: []
    }
  },
  methods: {
    async handlePageChange(page) {
      this.currentPage = page;
      await this.fetchBrands();
    },
    async fetchBrands() {
      const response = await axios.get('/api/brands', {
        params: { page: this.currentPage, size: this.pageSize }
      });
      this.brands = response.data.items;
      this.totalBrands = response.data.total;
    }
  }
}
</script>