开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第21天,点击查看活动详情
上一篇文章中我们获取到了题目的数据并且把它赋值给了一个空数组,接下来我们需要把获取到的数据通过v-for循环渲染数据到我们的页面上去,具体的题目页面的样式如下图所示:
- 首先我们先把题目渲染到页面上去,我们可以发现题目在subject数组中的title,所以我们渲染的时候需要使用{{this.subject[0].title}},这个就代表着渲染的是subject数组中第一个数据的题目,在页面上展示的时候我们可以规定一下他的字体大小,样式如下所示:
- 接下来是每一个题目的选项部分,选项因为是一个选择的样式,所以我们需要使用到uView组件库当中的u-radio组件,官方链接:www.uviewui.com/components/… ,我们选择基础用法然后复制粘贴一下代码到我们的项目中去,这里我们需要绑定选中的按钮的颜色,当用户点击选项选中了之后我们把按钮的颜色变成我们的主题色青色,如果选择错误则让选项颜色变成红色,动态绑定的lable就是题目接口中的code选项拼接上option选项内容,然后我们通过v-for="(item, index) in subject[0].options"来循环渲染这个数组中的内容,这里的渲染的是第一个元素的选项,然后再我们的页面上就可以看到选项和题目以及出现了