Vue3 使用计算属性将对象数组的姓和名展示在一起

<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>
<p>在模板中使用 v-for 渲染每个对象，然后通过计算属性 fullName 将姓和名展示在一起。计算属性接收一个参数 item，表示当前渲染的对象，然后返回姓和名拼接的字符串。</p>