vue里 使用v-for 完成水果列表的渲染里面包含 水果编号 名称 详细信息以及作用

在Vue.js中，使用`v-for`指令可以轻松地遍历并渲染数据数组，创建动态列表。假设你有一个名为`fruits`的数据数组，其中每个元素都包含了水果编号、名称、详细信息以及它们的作用，你可以这样编写HTML模板：

<template>
  <ul>
    <li v-for="fruit in fruits" :key="fruit.id">
      <div>
        <span>编号: {{ fruit.number }}</span>
        <span>名称: {{ fruit.name }}</span>
      </div>
      <p>详细信息: {{ fruit.detail }}</p>
      <p>作用: {{ fruit.role }}</p>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        { number: 1, name: '苹果', detail: '营养丰富', role: '健康食品' },
        { number: 2, name: '香蕉', detail: '提供能量', role: '运动补充' },
        // ... 更多水果数据...
      ]
    }
  }
}
</script>

在这个例子中，`:key`属性用于唯一标识每个列表项，避免渲染更新时出现问题。`v-for`会根据`fruits`数组的内容生成相应的列表项，并将每个元素的数据动态绑定到HTML元素上。