当前位置：首页 > VUE

vue实现商品列表代码

2026-02-20 18:03:22VUE

Vue 实现商品列表代码

基础结构

创建 Vue 项目后，在 src/App.vue 或组件文件中实现商品列表功能。需要定义商品数据、渲染列表模板及样式。

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

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: "商品A", price: 100 },
        { id: 2, name: "商品B", price: 200 },
        { id: 3, name: "商品C", price: 300 }
      ]
    };
  }
};
</script>

<style scoped>
.product-list {
  font-family: Arial, sans-serif;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 8px;
  border-bottom: 1px solid #eee;
}
</style>

动态加载数据

通过 axios 或 fetch 从后端 API 获取商品数据。

vue实现商品列表代码

<script>
import axios from 'axios';

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

添加交互功能

实现商品点击事件或购物车功能。

<template>
  <div class="product-list">
    <h2>商品列表</h2>
    <ul>
      <li 
        v-for="product in products" 
        :key="product.id"
        @click="addToCart(product)"
      >
        {{ product.name }} - ￥{{ product.price }}
      </li>
    </ul>
  </div>
</template>

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

使用 Vuex 管理状态

若项目复杂，可通过 Vuex 集中管理商品和购物车状态。

vue实现商品列表代码

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

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

组件中调用 Vuex

在组件中通过 mapState 和 mapActions 使用 Vuex。

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['products'])
  },
  methods: {
    ...mapActions(['fetchProducts']),
    addToCart(product) {
      this.$store.commit('ADD_TO_CART', product);
    }
  },
  mounted() {
    this.fetchProducts();
  }
};
</script>

分页与筛选

添加分页和筛选功能提升用户体验。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索商品" />
    <ul>
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
    <button @click="prevPage">上一页</button>
    <span>当前页: {{ currentPage }}</span>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => 
        product.name.includes(this.searchQuery)
      ).slice(
        (this.currentPage - 1) * this.itemsPerPage,
        this.currentPage * this.itemsPerPage
      );
    }
  },
  methods: {
    nextPage() {
      this.currentPage++;
    },
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    }
  }
};
</script>