Vue3中如何预处理v-for循环内的驼峰键名并格式化为展示标签

核心需求是将驼峰格式的对象键，转换为「大写字母前加空格、每个单词首字母大写」的展示标签，可通过以下几种方式实现，按需选择即可。

方案1：组件内封装格式化函数（单组件使用最简便） #

直接在组件内写转换函数，模板渲染时调用即可，适配绝大多数单组件使用场景。

1. 编写键名格式化逻辑：通过正则匹配所有大写字母，在其前插入空格，再统一处理单词首字母大写。
2. 模板中遍历对象时，调用函数转换原始key为展示标签。

完整代码示例：

<script setup>
import { ref } from 'vue'

// 待展示的源数据
const data = ref({
  countryId: 1,
  countryName: 'Bangladesh4',
  countryShortName: 'BD4',
  authStatus: 'U',
  createdBy: 'nasir'
})

/**
 * 驼峰键名转展示标签
 * @param {string} key 原始驼峰键名
 * @returns {string} 格式化后的标签文本
 */
const formatKeyLabel = (key) => {
  return key
    // 所有大写字母前插入空格
    .replace(/([A-Z])/g, ' $1')
    // 清除首尾多余空格（兼容首字母大写的驼峰写法）
    .trim()
    // 所有单词首字母转大写
    .replace(/\b\w/g, char => char.toUpperCase())
}
</script>

<template>
  <table>
    <tbody>
      <!-- 遍历对象时绑定唯一key，避免渲染异常 -->
      <tr v-for="(value, key) in data" :key="key">
        <th>{{ formatKeyLabel(key) }}</th>
        <td>{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

转换效果对照：

• countryId → Country Id
• countryName → Country Name
• countryShortName → Country Short Name
• authStatus → Auth Status
• createdBy → Created By

方案2：注册全局通用方法（多组件复用场景） #

如果项目中多个页面/组件都需要用到相同的格式化逻辑，可以将方法注册为全局属性，避免重复编写代码。

1. 在入口文件main.js中注册全局方法：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 注册全局驼峰键名格式化方法
app.config.globalProperties.$formatCamelKey = (key) => {
  return key
    .replace(/([A-Z])/g, ' $1')
    .trim()
    .replace(/\b\w/g, char => char.toUpperCase())
}

app.mount('#app')

2. 任意组件模板中可直接调用，无需单独定义：

<tr v-for="(value, key) in data" :key="key">
  <th>{{ $formatCamelKey(key) }}</th>
  <td>{{ value }}</td>
</tr>

方案3：计算属性预处理数据（大数据量场景性能更优） #

如果遍历的对象属性非常多，不想每次重渲染都重复执行格式化逻辑，可以通过计算属性提前将源数据处理为带展示标签的结构，渲染时直接读取即可。

<script setup>
import { ref, computed } from 'vue'
const rawData = ref({
  countryId: 1,
  countryName: 'Bangladesh4',
  countryShortName: 'BD4',
  authStatus: 'U',
  createdBy: 'nasir'
})

// 提前格式化所有键名，仅在源数据变化时重新计算
const formattedTableData = computed(() => {
  return Object.entries(rawData.value).map(([key, value]) => ({
    label: key
      .replace(/([A-Z])/g, ' $1')
      .trim()
      .replace(/\b\w/g, char => char.toUpperCase()),
    value
  }))
})
</script>

<template>
  <table>
    <tbody>
      <tr v-for="item in formattedTableData" :key="item.label">
        <th>{{ item.label }}</th>
        <td>{{ item.value }}</td>
      </tr>
    </tbody>
  </table>
</template>

提示：v-for遍历对象时建议始终绑定唯一的:key属性，提升渲染性能并避免DOM更新异常。

内容的提问来源于stack exchange，提问作者Abdus Sattar Bhuiyan