在vue.js中渲染剃刀视图循环

<template>
  <div>
    <!-- 使用v-for循环渲染ProductItem组件 -->
    <ProductItem
      v-for="(product, index) in products"
      :key="product.id"
      :product="product"
      :index="index"
    />
  </div>
</template>

<script>
import ProductItem from './ProductItem.vue';

export default {
  components: {
    ProductItem
  },
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100 },
        { id: 2, name: '商品B', price: 200 },
        // 更多商品...
      ]
    };
  }
};
</script>

<template>
  <div class="product-item">
    <h3>{{ product.name }}</h3>
    <p>价格：{{ product.price }}元</p>
  </div>
</template>

<script>
export default {
  props: {
    product: Object,
    index: Number
  }
};
</script>

<style scoped>
.product-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
</style>

<ProductItem
  v-for="(product, index) in products"
  :key="product.id"
/>

npm install vue-virtual-scroller

<template>
  <RecycleScroller
    class="scroller"
    :items="products"
    :item-size="32"
    key-field="id"
    v-slot="{ item }"
  >
    <ProductItem :product="item" />
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import ProductItem from './ProductItem.vue';

export default {
  components: {
    RecycleScroller,
    ProductItem
  },
  data() {
    return {
      products: [/* ... */]
    };
  }
};
</script>