Vue的列表渲染怎么用？

Vue.js

Visual Studio Code

小编使用的软件是Visual Studio Code。Visual Studio Code（简称vscode）是一个轻量且强大的代码编辑器。当然使用别的编辑器也是可以的。

列表渲染主要是把数组的数据渲染到指定的地方，简化代码工作量。新建文件在页面输入一个简单的布局。如图，其中v-for就是渲染的指令，需要使用-item in items- 形式的特殊语法，items 是源数据数组，item 是数组元素迭代的别名。

{{item.name}}表示在items中的name，因为item 是数组元素迭代的别名。所放的位置即是显示渲染列表的位置。

如图，items是数组，通过指令会把数组中的数据一条一条的渲染到页面中。图中有三条数据，则会渲染三次。

运行项目，则会打印出三条数据，分别是数组的三条数据。节省了很多代码，在很多数据时，大程度的减少了工作量。

当然，列表渲染的功能还有很多，这个只是最基本的使用。掌握了最基本的，才能往更深的使用，如索引、key的使用等。小编的分享到此结束。如果觉得这个经验帮助到您的话，麻烦点击下方的投票，给辛苦截图的小编一个支持，谢谢大家~