根据一组数据多次渲染元素或者模板，可以使用 v-for 指令。比如我有一个数组数据，我想把数组里的每个项目都显示出来 .. 先添加一个这样的数据 .. 放在应用的数据里 .. 名字可以是 items ，这个 items 可以是任何东西，比如一组文章，一组评论 ..

它的值是一个数组 .. 数组里面的每个项目都是一个对象 ... 每个对象里有个 text 属性，再设置一下这个属性的值 ... 对象里面可以有任意的属性 .. 为了简单我们只是手工添加了一个 text 属性 ... 如果是一组评论，这个对象里可能会有评论的时间，作者，评论的内容等等 ..

然后再添加两个类似的对象 ...

在这个 html 文档里.. 随便添加一个元素 .. 在这个元素上用一下 v-for 指令 ... 这个元素会被重复渲染多次 .. 它的值需要使用一种特别的形式 ... item in items .. 意思就是，把 items 这个数组里的每个项目都交给 item .. 这个 item 你可以随便去命名它 .. 一般会是一个单数形式的名词 ..

这样每次显示 items 里面的项目的时候，item 表示的就是 items 这组数据里的某个项目 ... 每个项目里面都有一个 text 属性，要输出这个属性的值可以这样 .. item.text ..

回到浏览器 .. 在页面上会显示一组数据 .. 这组数据就是应用里的 items 里面的内容 ... 每个项目的周围都会使用一组 div 标签包装 ..

如果你要得到项目的序号，可以这样做 ... 一组括号 ... item, index ，这个 index 表示的就是项目的序号 .. 或者叫索引号 ..

然后再绑定输出项目的序号 ... {{ index }} -

现在页面上显示的这组数据里面，会包含这个项目的序号 ... 这个序号是从 0 开始的 .. 想让它从 1 开始，可以让这个 index 加上 1 ...

每次渲染列表项目的时候，如果这个列表里面需要包含多个元素，你可以使用一个额外的元素包装一下它们 ... 或者可以使用一组 template 标签 ... 然后把这个 v-for 指令放到这个元素的上面 ..

这里再添加一个分隔符 ... div.ui.divider

再去预览一下 ... 现在每个列表项目会包含两个元素，一个 div 里面包装的是文字，还有一个 div 分隔符 ...