vue商品动态生成代码

在Vue中，可以通过循环遍历数组来动态生成商品列表的代码，例如：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <img :src="item.image" alt="product image">
      <h3>{{ item.name }}</h3>
      <p>{{ item.description }}</p>
      <p>Price: {{ item.price }}</p>
      <button @click="addToCart(item)">Add to Cart</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Product 1', description: 'Description 1', image: 'product1.jpg', price: 10 },
        { id: 2, name: 'Product 2', description: 'Description 2', image: 'product2.jpg', price: 20 },
        { id: 3, name: 'Product 3', description: 'Description 3', image: 'product3.jpg', price: 30 },
        { id: 4, name: 'Product 4', description: 'Description 4', image: 'product4.jpg', price: 40 },
      ],
      cart: [],
    };
  },
  methods: {
    addToCart(item) {
      this.cart.push(item);
    },
  },
};
</script>

在上面的例子中，使用了v-for指令循环遍历items数组，然后根据数组的每个元素动态生成商品列表的代码。同时，在每个商品后面添加了一个“Add to Cart”按钮，当用户点击按钮时，会将商品添加到购物车中。