使用el-descriptions组件怎么取字典值,给我代码
时间: 2024-05-07 14:16:40 浏览: 13
好的,您的问题已收到,下面是使用el-descriptions组件取字典值的示例代码:
```html
<template>
<el-descriptions :items="items">
<el-descriptions-item label="姓名">
{{ user.name }}
</el-descriptions-item>
<el-descriptions-item label="年龄">
{{ user.age }}
</el-descriptions-item>
<el-descriptions-item label="性别">
{{ user.gender }}
</el-descriptions-item>
</el-descriptions>
</template>
<script>
export default {
data() {
return {
user: {
name: '张三',
age: 18,
gender: '男'
},
items: [
{
label: '姓名',
value: '{{ user.name }}'
},
{
label: '年龄',
value: '{{ user.age }}'
},
{
label: '性别',
value: '{{ user.gender }}'
}
]
}
}
}
</script>
```
以上代码中,我们使用了el-descriptions组件来展示用户的信息,并且使用了el-descriptions-item组件来展示每一个属性的值。同时,在items数组中我们定义了每个属性对应的label和value,其中value中使用了双括号{{}}来取对象中的属性值。
希望这个回答对你有所帮助,如有疑问,请随时在评论区提出。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![tsv](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)