vue实现水果列表案例
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指令循环渲染水果列表，展示名称、价格和图片。
<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>添加交互功能
实现添加水果到购物车的功能，在数据中添加购物车数组和方法。
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)
}
}最终效果
项目将展示一个美观的水果列表，支持添加商品到购物车并计算总价，具备响应式布局适应不同屏幕尺寸。
