(简易)测试数据构造平台: 6 (首页部分)

【本期内容】：构造简单的工具列表

【本期技术】：vue的data 和 循环。

首先，我们打开上节课的首页-ToolList.vue ：

思考：如果要构造一个展示工具名称的列表，那么需要什么？

答：需要一个数据列表，需要一个元素dom，然后循环这个数据列表来循环生成多个元素dom 来展示出来。

实现

构造一个数据列表

构造展示的元素dom并循环：

启动本地调试：npm run serve

然后打开浏览器，进入8080端口的本地地址，看看效果：

大家注意到，已经成功展示了。

接下来，我们要升级难度，把这个普通的数据列表，改成字典元素列表，这样的好处是，每个工具都可以包含名称在内的多个属性，比如构造时间等。

data属性内修改如下：

然后dom层修改为：

效果如下：

大家先不用考虑这些数据从哪里来，这些数据我们后面都是要从接口的方式去django后台服务上拿到，而后台是去数据库中提取的。

然后大家是不是觉得，目前这个样式很难看？

不要紧，接下来我们就要引入elementUI来美化这个页面了。

本节到此结束，欢迎收看下集