当前位置：首页 > VUE

vue实现简单商品列表

2026-02-23 11:29:45VUE

Vue 实现简单商品列表

创建 Vue 项目

使用 Vue CLI 或 Vite 快速初始化项目。安装依赖后，在 src 目录下新建组件文件（如 ProductList.vue）。

定义商品数据

在组件的 data 或 setup 中定义商品数组，包含商品名称、价格、图片等字段：

data() {
  return {
    products: [
      { id: 1, name: "商品A", price: 99, image: "image1.jpg" },
      { id: 2, name: "商品B", price: 199, image: "image2.jpg" }
    ]
  };
}

模板渲染

使用 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>

样式设计

通过 CSS 或 SCSS 美化列表布局，例如网格或弹性盒子：

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.product-item {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

交互功能

添加点击事件或购物车功能，例如通过方法处理商品点击：

methods: {
  handleClick(product) {
    console.log("选中商品:", product.name);
  }
}

<button @click="handleClick(product)">加入购物车</button>

数据动态化

若需从后端获取数据，可使用 axios 或 fetch 在 created 或 mounted 钩子中请求接口：

async mounted() {
  const response = await axios.get("/api/products");
  this.products = response.data;
}

组件化拆分

将商品项拆分为子组件（如 ProductItem.vue），通过 props 传递数据：

vue实现简单商品列表

<ProductItem 
  v-for="product in products" 
  :key="product.id" 
  :product="product" 
  @add-to-cart="handleAddCart" 
/>

状态管理（可选）

对于复杂场景，可通过 Vuex 或 Pinia 全局管理商品状态，实现跨组件通信。

标签: 简单商品列表

分享给朋友：

vue 实现长列表

Vue 实现长列表的优化方案虚拟滚动技术虚拟滚动是处理长列表的高效方式，仅渲染可视区域内的元素。通过计算滚动位置动态加载和卸载DOM节点，大幅减少内存占用和渲染压力。 <template&…

vue列表实现

Vue 列表实现方法使用 v-for 指令 v-for 是 Vue 中用于渲染列表的核心指令，基于数据源动态生成 DOM 元素。语法格式为 item in items 或 (item, index)…

vue实现列表添加

使用 Vue 实现列表添加功能数据绑定与列表渲染在 Vue 中，通过 v-for 指令可以轻松实现列表渲染。首先需要定义一个数组来存储列表数据，并在模板中使用 v-for 循环渲染。 <t…

jquery 列表

jQuery 列表操作 jQuery 提供了多种方法来操作 HTML 列表（如 <ul> 或 <ol>）。以下是一些常见的操作方式：动态添加列表项使用 append()…

vue实现列表demo

以下是一个基于 Vue.js 的列表实现示例，包含基础功能与关键代码解析：基础列表渲染 <template> <div> <ul> &l…

vue实现分类列表

Vue 实现分类列表的方法数据结构设计使用数组存储分类数据，每个分类对象包含 id、name 等属性，子分类通过 children 字段嵌套。例如： categories: [ {…

vue实现简单商品列表