可以使用计算属性来将姓和名展示在一起,具体代码如下:

<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,表示当前渲染的对象,然后返回姓和名拼接的字符串

vue3中有一个对象数组通过v-for渲染每个对象将内部的姓和名通过计算属性展示在一起

原文地址: https://www.cveoy.top/t/topic/hhVW 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录