vue实现简单商品列表

实现商品列表的基本结构

在Vue中实现商品列表，需要创建一个组件来展示商品数据。通常使用v-for指令循环渲染商品列表。

<template>
  <div class="product-list">
    <div v-for="product in products" :key="product.id" class="product-item">
      <img :src="product.image" :alt="product.name">
      <h3>{{ product.name }}</h3>
      <p>{{ product.price }}</p>
    </div>
  </div>
</template>

定义商品数据

商品数据可以定义在组件的data选项中，或者从API获取。以下是一个静态数据示例：

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: '¥100', image: 'image1.jpg' },
        { id: 2, name: '商品2', price: '¥200', image: 'image2.jpg' },
        { id: 3, name: '商品3', price: '¥300', image: 'image3.jpg' }
      ]
    }
  }
}
</script>

添加样式

为商品列表和商品项添加基本样式，确保布局美观。

<style>
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.product-item {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.product-item img {
  max-width: 100%;
  height: auto;
}
</style>

动态加载商品数据

如果需要从API加载商品数据，可以使用axios或fetch在created或mounted钩子中获取数据。

<script>
import axios from 'axios';

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

添加商品交互功能

可以为商品列表添加点击事件或购物车功能，增强用户交互。

<template>
  <div class="product-list">
    <div 
      v-for="product in products" 
      :key="product.id" 
      class="product-item"
      @click="addToCart(product)"
    >
      <img :src="product.image" :alt="product.name">
      <h3>{{ product.name }}</h3>
      <p>{{ product.price }}</p>
      <button>加入购物车</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    addToCart(product) {
      this.$emit('add-to-cart', product);
    }
  }
}
</script>

使用Vuex管理状态

如果项目复杂，可以使用Vuex管理商品和购物车状态。

import Vuex from 'vuex';

const store = new Vuex.Store({
  state: {
    products: [],
    cart: []
  },
  mutations: {
    setProducts(state, products) {
      state.products = products;
    },
    addToCart(state, product) {
      state.cart.push(product);
    }
  },
  actions: {
    fetchProducts({ commit }) {
      axios.get('https://api.example.com/products')
        .then(response => {
          commit('setProducts', response.data);
        });
    }
  }
});

商品列表分页

对于大量商品数据，可以实现分页功能。

<template>
  <div>
    <div class="product-list">
      <!-- 商品列表 -->
    </div>
    <div class="pagination">
      <button 
        v-for="page in totalPages" 
        :key="page"
        @click="goToPage(page)"
      >
        {{ page }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 10,
      totalItems: 100
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    }
  },
  methods: {
    goToPage(page) {
      this.currentPage = page;
      this.fetchProducts();
    },
    fetchProducts() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      axios.get(`https://api.example.com/products?_start=${start}&_end=${end}`)
        .then(response => {
          this.products = response.data;
        });
    }
  }
}
</script>