当前位置：首页 > VUE

vue实现产品列表

2026-01-17 23:40:28VUE

Vue 实现产品列表的方法

使用 Vue CLI 创建项目

安装 Vue CLI 并初始化项目，确保项目环境配置正确。

npm install -g @vue/cli
vue create product-list
cd product-list

创建产品数据模型

在 src 目录下创建 data/products.js 文件，定义产品数据。

export default [
  { id: 1, name: '产品A', price: 100, description: '描述A' },
  { id: 2, name: '产品B', price: 200, description: '描述B' },
  { id: 3, name: '产品C', price: 300, description: '描述C' }
];

创建产品列表组件

在 src/components 目录下创建 ProductList.vue 文件，实现列表渲染。

<template>
  <div class="product-list">
    <h3>产品列表</h3>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - ￥{{ product.price }}
        <p>{{ product.description }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import products from '@/data/products';

export default {
  data() {
    return {
      products: products
    };
  }
};
</script>

<style scoped>
.product-list {
  margin: 20px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
}
</style>

在父组件中引入

在 App.vue 中引入并使用 ProductList 组件。

<template>
  <div id="app">
    <ProductList />
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';

export default {
  components: {
    ProductList
  }
};
</script>

动态加载数据

如果需要从 API 动态加载数据，可以使用 axios 或 fetch。

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: []
    };
  },
  created() {
    axios.get('https://api.example.com/products')
      .then(response => {
        this.products = response.data;
      })
      .catch(error => {
        console.error('加载产品数据失败:', error);
      });
  }
};
</script>

添加分页功能

使用 v-pagination 组件或自定义分页逻辑实现分页。

<template>
  <div>
    <ProductList :products="paginatedProducts" />
    <div class="pagination">
      <button 
        v-for="page in totalPages" 
        :key="page" 
        @click="currentPage = page"
        :class="{ active: currentPage === page }"
      >
        {{ page }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      currentPage: 1,
      itemsPerPage: 5
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.products.length / this.itemsPerPage);
    },
    paginatedProducts() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.products.slice(start, end);
    }
  }
};
</script>

使用 Vuex 管理状态

对于复杂应用，可以使用 Vuex 集中管理产品数据状态。

// store/modules/products.js
export default {
  state: {
    products: []
  },
  mutations: {
    SET_PRODUCTS(state, products) {
      state.products = products;
    }
  },
  actions: {
    fetchProducts({ commit }) {
      axios.get('https://api.example.com/products')
        .then(response => {
          commit('SET_PRODUCTS', response.data);
        });
    }
  }
};

添加搜索功能

在组件中实现搜索逻辑，过滤产品列表。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索产品" />
    <ProductList :products="filteredProducts" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      searchQuery: ''
    };
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => 
        product.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

通过以上方法，可以灵活实现 Vue 产品列表功能，并根据需求扩展更多特性。

vue实现产品列表