Vue3Cli-列表渲染(v-for使用)

列表渲染：使用 v-for 指令基于一个数组来渲染一个列表。

一、v-for

用法：基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：

  {{ item.text }}

另外也可以为数组索引指定别名 (或者用于对象的键)：

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

  {{ item.text }}

参考:列表渲染

二、在组件上使用 v-for

在自定义组件上，你可以像在任何普通元素上一样使用 v-for：

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props：

不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

1.0、是一个简单的 todo 列表的完整例子：

以上是模块

以上是区域

页面显示预览哈

游走前端开发.png

示例代码地址