vue实现品牌列表

实现品牌列表的Vue方案

使用Vue 3组合式API

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

<script setup>
import { ref, computed } from 'vue'

const brands = ref([
  { id: 1, name: 'Nike', origin: 'USA' },
  { id: 2, name: 'Adidas', origin: 'Germany' }
])

const searchQuery = ref('')

const filteredBrands = computed(() => {
  return brands.value.filter(brand => 
    brand.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})
</script>

使用Vue 2选项式API

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

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

从API获取品牌数据

<script setup>
import { ref, onMounted } from 'vue'

const brands = ref([])

onMounted(async () => {
  const response = await fetch('https://api.example.com/brands')
  brands.value = await response.json()
})
</script>

添加分页功能

const currentPage = ref(1)
const itemsPerPage = 5

const paginatedBrands = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage
  return filteredBrands.value.slice(start, start + itemsPerPage)
})

使用UI组件库优化显示

<template>
  <el-table :data="filteredBrands" style="width: 100%">
    <el-table-column prop="name" label="品牌名称"></el-table-column>
    <el-table-column prop="origin" label="国家"></el-table-column>
  </el-table>
</template>

品牌卡片式布局

<template>
  <div class="brand-grid">
    <div v-for="brand in filteredBrands" :key="brand.id" class="brand-card">
      <img :src="brand.logo" :alt="brand.name" />
      <h3>{{ brand.name }}</h3>
    </div>
  </div>
</template>

<style>
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.brand-card {
  border: 1px solid #eee;
  padding: 15px;
  text-align: center;
}
</style>