在vue文件中写一个列表渲染

假设我们有一个列表数据如下：

listData: [
  {id: 1, name: 'Apple'},
  {id: 2, name: 'Banana'},
  {id: 3, name: 'Orange'}
]

那么可以在 Vue 文件中这样写一个列表渲染：

<template>
  <ul>
    <li v-for="item in listData" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        {id: 1, name: 'Apple'},
        {id: 2, name: 'Banana'},
        {id: 3, name: 'Orange'}
      ]
    }
  }
}
</script>

这里使用了 `v-for` 来遍历列表数据并渲染出来。需要注意的是，为了避免 `v-for` 的 `key` 重复，需要使用每个项的唯一标识 `id` 来作为 `key`。同时，数据可以定义在 `data` 中，这样可以更方便地在组件中使用。