山地人

循环展示数据

山地人
山地人
2021-05-13

对于产品列表,或者一个表格这种展示结构相同的数据,我们可以用循环的方式进行展示。我们还是通过案例来说明问题。

代码分析

这里我们用到了一个新的指令v-for,这个指令的作用是把一个数组里的每一项从数组中提取出来。

<ul v-for="course in courses">
<li>{{course}}</li>
</ul>

比如这里的courses就是一个课程的数组,v-for指令每次从courses中提取一个元素,比如:

  • 第一次course = "Vue",在这次迭代中,生成<li>Vue</li>
  • 第二次course = "React",在这次迭代中,生成<li>React</li>
  • 第三次… 最终完成所有数组中元素的迭代,我们也就得到了一个完整的课程列表。

原生JavaScript写法

下面我们依然会脱离框架,用纯JS的方式展示类似的功能,让你可以进行对比。

在原生写法中条件显示直接在JavaScript的if...else语句中直接处理,然后通过直接对DOM元素的操作来完成。

优缺点分析

  • 对于简单的页面,这种方式处理问题相对来说灵活性更高,但如果页面结构复杂的情况下,代码的可维护程度就需要较高的代码组织和维护能力了。
  • 而对于向使用Vue这种数据和表现分离的,数据驱动型框架,可以让我们更加方便得维护业务代码,而不用太关心底层DOM的操作逻辑。