vue 使用 el-descriptions v-for 示例
时间: 2024-01-13 22:23:52 浏览: 164
vue v-for直接循环数字实例
好的,下面是一个使用 `el-descriptions` 和 `v-for` 的 Vue 示例:
```html
<template>
<div>
<el-descriptions :column="1">
<el-descriptions-item v-for="(item, index) in items" :key="index" :label="item.label">{{ item.value }}</el-descriptions-item>
</el-descriptions>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ label: '姓名', value: '张三' },
{ label: '年龄', value: '18' },
{ label: '性别', value: '男' }
]
}
}
}
</script>
```
在此示例中,我们将 `el-descriptions` 组件的列数设置为 1,然后使用 `v-for` 循环渲染 `el-descriptions-item` 组件,其中 `:label` 属性为每个条目设置标签,`{{ item.value }}` 为每个条目设置值。
希望这个示例能够帮到你!
阅读全文