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

Question

毫无疑问，vue 中的 v-for 标签很棒。

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

<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>

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

Answer 1

您可以使用 <template v-for="item in items"></template>，它只会呈现 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>

Answer 2

您可以将 <template> 标签与 v-for 一起使用来呈现多个元素的块

new Vue({
  el: "#app",
  data() {
    return {
      items: [
        { short: "1", long: "Long Description 1" },
        { short: "2", long: "Long Description 2" },
        { short: "3", long: "Long Description 3" },
        { short: "4", long: "Long Description 4" },
      ]
    }
  }
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <dl class="row">
    <template v-for="data in items">
      <dt class="col-sm-3">{{data.short}}</dt>
      <dd class="col-sm-9">{{data.long}}</dd>
    </template>
  </dl>
</div>

Answer 3

HTML5 规范 (according to MDN) 允许将 <dt> 和 <dd> 元素包装在 <div> 中用于微数据或样式目的。我推荐以下内容：

<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>

这也处理 v-for 需要一个 :key 属性。

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

How can I generate a description list (dl) in Vue.js using v-for?

javascript

vue.js

v-for