Vue.js功法之练气初期：复习知识点之列表渲染（List Rendering）

列表渲染（List Rendering）

Vue.js提供了强大的列表渲染功能，通过使用v-for指令，你可以在模板中轻松地渲染数组或对象的数据。

为什么使用列表渲染？

1. 动态生成元素： 根据数据的不同，动态生成列表中的元素。
2. 简化模板： 通过v-for指令，可以简化模板中对列表的操作。

示例代码

假设我们有一个存储任务列表的数组，我们希望在页面上展示这些任务：

<template>
  <div>
    <h2>任务列表</h2>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task.name }} - {{ task.status }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { name: '完成Vue教程', status: '未完成' },
        { name: '学习Vue组件', status: '已完成' },
        { name: '实践Vue项目', status: '未完成' },
      ],
    };
  },
};
</script>