当前位置：首页 > VUE

vue实现水果列表案例

2026-02-22 18:28:41VUE

Vue 实现水果列表案例

数据准备与组件结构

在 Vue 项目中创建一个水果列表的数据结构，通常使用数组存储水果信息，每个水果对象包含名称、价格、图片等属性。例如：

data() {
  return {
    fruits: [
      { id: 1, name: '苹果', price: 5, image: 'apple.jpg' },
      { id: 2, name: '香蕉', price: 3, image: 'banana.jpg' },
      { id: 3, name: '橙子', price: 4, image: 'orange.jpg' }
    ]
  }
}

列表渲染

使用 v-for 指令遍历水果数组，动态生成列表项。通过 :key 绑定唯一标识（如 id）优化渲染性能。

<ul class="fruit-list">
  <li v-for="fruit in fruits" :key="fruit.id">
    <img :src="fruit.image" :alt="fruit.name">
    <span>{{ fruit.name }}</span>
    <span>¥{{ fruit.price }}</span>
  </li>
</ul>

样式设计

通过 CSS 美化列表布局，建议使用 Flexbox 或 Grid 实现响应式排列。例如：

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

交互功能增强

添加点击事件或购物车功能，例如点击水果时触发方法：

<li v-for="fruit in fruits" @click="addToCart(fruit)">
  <!-- 列表内容 -->
</li>

methods: {
  addToCart(fruit) {
    console.log(`已添加 ${fruit.name} 到购物车`);
  }
}

动态过滤与搜索

通过 v-model 绑定搜索输入框，使用计算属性实现实时过滤：

<input v-model="searchQuery" placeholder="搜索水果">

computed: {
  filteredFruits() {
    return this.fruits.filter(fruit => 
      fruit.name.includes(this.searchQuery)
    );
  }
}

完整组件示例

将以上逻辑整合为单文件组件（SFC）：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索水果">
    <ul class="fruit-list">
      <li 
        v-for="fruit in filteredFruits" 
        :key="fruit.id"
        @click="addToCart(fruit)"
      >
        <img :src="fruit.image" :alt="fruit.name">
        <span>{{ fruit.name }}</span>
        <span>¥{{ fruit.price }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      fruits: [
        { id: 1, name: '苹果', price: 5, image: 'apple.jpg' },
        { id: 2, name: '香蕉', price: 3, image: 'banana.jpg' }
      ]
    }
  },
  computed: {
    filteredFruits() {
      return this.fruits.filter(fruit => 
        fruit.name.includes(this.searchQuery)
      );
    }
  },
  methods: {
    addToCart(fruit) {
      alert(`已添加 ${fruit.name}`);
    }
  }
}
</script>

<style scoped>
/* 样式代码 */
</style>

vue实现水果列表案例