当前位置：首页 > VUE

vue实现水果列表案例

2026-01-22 03:25:32VUE

Vue 实现水果列表案例

创建Vue项目

使用Vue CLI创建一个新项目，确保已安装Node.js和Vue CLI。

vue create fruit-list
cd fruit-list
npm run serve

数据准备

在src/App.vue中定义水果数据数组，包含名称、价格和图片URL。

data() {
  return {
    fruits: [
      { name: 'Apple', price: 2.5, image: 'https://example.com/apple.jpg' },
      { name: 'Banana', price: 1.2, image: 'https://example.com/banana.jpg' },
      { name: 'Orange', price: 3.0, image: 'https://example.com/orange.jpg' }
    ]
  }
}

模板渲染

使用v-for指令循环渲染水果列表，展示名称、价格和图片。

vue实现水果列表案例

<template>
  <div id="app">
    <h1>Fruit List</h1>
    <div class="fruit-list">
      <div v-for="fruit in fruits" :key="fruit.name" class="fruit-item">
        <img :src="fruit.image" :alt="fruit.name">
        <h3>{{ fruit.name }}</h3>
        <p>Price: ${{ fruit.price }}</p>
      </div>
    </div>
  </div>
</template>

样式设计

添加CSS样式美化水果列表布局，使用Flexbox或Grid实现响应式设计。

<style>
.fruit-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}
.fruit-item {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
.fruit-item img {
  max-width: 100px;
  height: auto;
}
</style>

添加交互功能

实现添加水果到购物车的功能，在数据中添加购物车数组和方法。

vue实现水果列表案例

data() {
  return {
    fruits: [...],
    cart: []
  }
},
methods: {
  addToCart(fruit) {
    this.cart.push(fruit)
  }
}

购物车组件

创建独立的购物车组件显示已选水果，在模板中添加购物车按钮和展示区域。

<button @click="addToCart(fruit)">Add to Cart</button>
<div class="cart">
  <h2>Cart ({{ cart.length }})</h2>
  <ul>
    <li v-for="item in cart" :key="item.name">
      {{ item.name }} - ${{ item.price }}
    </li>
  </ul>
</div>

计算总价

使用计算属性实时计算购物车中水果总价格。

computed: {
  totalPrice() {
    return this.cart.reduce((sum, fruit) => sum + fruit.price, 0)
  }
}

最终效果

项目将展示一个美观的水果列表，支持添加商品到购物车并计算总价，具备响应式布局适应不同屏幕尺寸。

标签: 水果案例

分享给朋友：

vue实现翻牌效果案例

Vue 实现翻牌效果案例翻牌效果通常用于展示卡片翻转动画，常见于记忆游戏或展示正反面内容。以下是基于 Vue 3 的实现方案：基础翻牌效果实现创建翻转动画的核心是利用 CSS 的 transf…

vue实现页面各种案例

Vue 实现页面常见案例动态表单生成使用 v-for 和 v-model 动态渲染表单字段，适合问卷或配置类场景。通过数据驱动表单结构，字段类型可扩展为输入框、下拉框等。 <templat…

vue实现点赞案例

Vue实现点赞功能基础实现（无持久化）创建Vue组件，使用v-on绑定点击事件和v-bind动态绑定样式： <template> <button @clic…

react 实现长列表案例

实现长列表的常用方法虚拟滚动技术（Virtual Scrolling）虚拟滚动通过仅渲染当前可视区域内的列表项来提升性能，适合超长列表场景。React生态中常用库如react-window或rea…

html css网页制作案例

HTML CSS网页制作案例响应式个人主页使用HTML5和CSS3创建一个响应式个人主页，包含导航栏、简介、作品集和联系信息。通过媒体查询实现不同屏幕尺寸的适配。 <!DOCTYPE h…

css案例制作

CSS案例制作指南响应式导航栏通过Flexbox或Grid布局实现自适应导航栏，兼容移动端与桌面端。关键代码： .navbar { display: flex; justify-cont…

vue实现水果列表案例