在Vue中，常见的UI组件之一就是列表。列表是用来展示大量数据的有效方式。通过本文，将学习如何使用Vue创建简单的静态和动态列表。
创建一个静态列表
我们来创建一个静态列表，它不涉及到任何数据交互或状态变化。要创建这样的列表，可以使用Vue的 v-for 指令，它允许您遍历数组并将每个元素渲染到列表中。
下面是一个简单的代码示例：
我的任务列表
- {{ task.name }}
在上面的代码中，我们使用 data() 方法定义 tasks 数组，并将其绑定到列表模板中。使用 v-for 遍历 tasks 数组，并为每个任务渲染一个列表项。注意，在 v-for 中，我们必须提供一个 key 属性，以便Vue能够正确地跟踪每个列表项。
创建动态列表
我们将了解如何使用Vue创建动态列表。动态列表是指可以从API或其他数据源获取数据，并根据需要更新列表内容。
为了演示这一点，我们假设有一个API端点，在响应中返回任务列表。在这种情况下，我们需要使用Vue的生命周期钩子函数 created() 来调用API并获取任务列表。
下面是代码示例：
我的任务列表
- {{ task.name }}
在上面的代码中，我们定义一个空的 tasks 数组。在 created() 钩子函数中，我们使用JavaScript的 fetch() 函数发起一个HTTP请求，并将结果转换为JSON格式。我们将获取到的任务数组赋值给组件的 tasks 数据属性，这会触发Vue重新渲染组件，并显示新的任务列表。