vue3中有一个对象数组通过v-for渲染每个对象将内部的姓和名通过计算属性展示在一起
可以使用计算属性来将姓和名展示在一起,具体代码如下:
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ fullName(item) }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ firstName: 'John', lastName: 'Doe' },
{ firstName: 'Jane', lastName: 'Doe' },
{ firstName: 'Bob', lastName: 'Smith' }
]
}
},
computed: {
// 计算属性将姓和名展示在一起
fullName() {
return (item) => {
return `${item.firstName} ${item.lastName}`
}
}
}
}
</script>
在模板中使用v-for渲染每个对象,然后通过计算属性fullName将姓和名展示在一起。计算属性接收一个参数item,表示当前渲染的对象,然后返回姓和名拼接的字符串
原文地址: https://www.cveoy.top/t/topic/hhVW 著作权归作者所有。请勿转载和采集!