Vue列表渲染：如何在v-for前替换字符串值？

给你几个实用的方案，比在v-for里堆v-if清爽多了：

1. 用计算属性预处理数组 #

通过计算属性把原始数组转换成包含替换后文本的新数组，模板里直接遍历处理好的数组就行，逻辑和视图完全分离：

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

const items = ref([{ letter: "A", message: '1' }, { letter: "B", message: '2' }])

// 定义映射关系
const fruitMap = {
  '1': 'Apple',
  '2': 'Banana'
}

// 计算属性处理数组
const processedItems = computed(() => {
  return items.value.map(item => ({
    ...item,
    fruit: fruitMap[item.message] || item.message // 找不到对应值就保留原内容
  }))
})
</script>

<template>
  <li v-for="(item, index) in processedItems" :key="index">
    <p>{{ item.letter }} - {{ item.fruit }}</p>
  </li>
</template>

2. 直接在模板里用映射对象 #

如果不想修改数组结构，直接定义一个映射对象，模板里通过键取值，代码更简洁：

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

const items = ref([{ letter: "A", message: '1' }, { letter: "B", message: '2' }])
const fruitMap = {
  '1': 'Apple',
  '2': 'Banana'
}
</script>

<template>
  <li v-for="(item, index) in items" :key="index">
    <p>{{ item.letter }} - {{ fruitMap[item.message] }}</p>
  </li>
</template>

3. 直接修改原始数据（按需使用） #

如果不需要保留原始的message值，可以在初始化时直接替换掉，省掉后续的转换步骤：

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

const fruitMap = {
  '1': 'Apple',
  '2': 'Banana'
}

// 初始化时直接替换
const items = ref([
  { letter: "A", message: fruitMap['1'] }, 
  { letter: "B", message: fruitMap['2'] }
])

// 如果是异步获取的数据，就在拿到数据后处理
// 比如：
// fetchData().then(res => {
//   items.value = res.data.map(item => ({
//     ...item,
//     message: fruitMap[item.message] || item.message
//   }))
// })
</script>

<template>
  <li v-for="(item, index) in items" :key="index">
    <p>{{ item.letter }} - {{ item.message }}</p>
  </li>
</template>

推荐前两种方案，尤其是第一种，逻辑清晰且不破坏原始数据，后续维护映射关系只需要修改fruitMap就行，扩展性很强。

内容的提问来源于stack exchange，提问作者Progranoob