请使用v-for完成水果列表的渲染

当你想要使用Vue.js中的`v-for`指令来渲染一个水果列表时，你需要设置一个数据数组，然后遍历这个数组并生成列表项。假设你有一个包含各种水果名称的数组，你可以这样做：

<template>
  <div class="fruit-list">
    <ul>
      <li v-for="(fruit, index) in fruits" :key="index">
        {{ fruit }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry', 'Durian'] // 假设这是你的水果数组
    };
  }
};
</script>

在这个例子中：

- `<template>`标签里定义了HTML结构，其中`v-for`指令用于遍历`fruits`数组。
- `v-for`指令语法是`: (item, index) in array`，这里的`(fruit, index)`分别代表当前迭代的元素和它的索引。
- `:key="index"`用于给每个列表项添加唯一标识，这对于优化列表更新性能很重要。
- `{{ fruit }}`表示显示当前迭代的水果名。

如果你需要根据其他条件动态渲染（比如分组、过滤等），可以在`v-for`的表达式中添加更多的逻辑。