javascript - 如何使用 v-for 在 Vue.js 中生成描述列表 (dl)?
问题描述
毫无疑问,vue 中的 v-for 标签很棒。
我现在有一种情况,我想生成这样的描述列表。在这种情况下,我需要为数组中的每个元素生成两个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 做到这一点?
解决方案
您可以使用<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>
推荐阅读
- java - 如何将基数为 10 的数字转换为带字符的编号系统?
- swiftui - 一个类可以成为 SwiftUI 中的视图吗?
- scrapy - 从 scrapy-splash python 项目中获取 .exe
- javascript - Sharepoint 组权限级别
- vue.js - 如何使用 Jest 和 VueJS 忽略 Bootstrap 类?
- php - 检查任何2个不同维度的数组中的任何值在php中是否相同
- c++ - 成对使用 unique_ptr
- database - Codeigniter 搜索用户和详细信息
- python - 使用继承正确扩展 tkinter 小部件
- node.js - Github Actions - 未处理的拒绝 SequelizeConnectionError:启动数据包中未指定 PostgreSQL 用户名