Javascript 如何使用v-for在Vue.js中生成描述列表（dl）？

vue中的v-for标记无疑是很棒的

现在，我需要生成一个描述列表，例如。在这种情况下，我需要为数组中的每个元素生成两个DOM元素：

描述列表
描述列表非常适合定义术语。

是否有任何（或多或少优雅的）方法可以使用vue实现这一点？

您可以使用

，它将只呈现HTML中的内容，而不是包装元素。因此，可以为数组中的每个元素生成两个DOM元素

例如：

 <template v-for="item in items">
    <dl class="row">
      <dt class="col-sm-3">Description lists</dt>
      <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
    </dl>
    <dl class="row">
      <dt class="col-sm-3">Description lists</dt>
      <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
    </dl>
 <template>

描述列表
描述列表非常适合定义术语。
描述列表
描述列表非常适合定义术语。

您可以使用带有

v-for的标记来渲染多个元素的块


newvue({
el:“应用程序”，
数据（）{
返回{
项目：[
{短：“1”，长：“长描述1”}，
{短：“2”，长：“长描述2”}，
{短：“3”，长：“长描述3”}，
{短：“4”，长：“长描述4”}，
]
}
}
})

{{data.short}
{{data.long}
HTML5规范（）允许将
和
元素包装在
中，用于微数据或样式设计。我建议如下：

<dl class="row">
  <div v-for="item in items" :key="item.id">
    <dt class="col-sm-3">{{ item.key }}</dt>
    <dd class="col-sm-9">{{ item.value }}</dd>
  </div>
</dl>


{{item.key}
{{item.value}}

这也可以处理v-for需要：key属性。
感谢您给我指出
标记。正如adiga的回答所示，我可以使用它生成多个元素。如何提供
key
属性？无法键入
模板
。@HafezDivandari使用
包装器，请参阅我的答案below@HafezDivandari您可以在
dt
和
dd
元素上设置
key
属性：
…
，确切地说，不是HTML 5规范。