Vue中如何将字符串分割为数组并在v-for列表渲染中使用

嘿，我来帮你搞定这个嵌套循环的问题！你的思路完全没问题——就是要把每个codes字符串按+分割成数组，再嵌套渲染。不过你的代码里有两个小问题需要调整，我给你梳理清楚：

问题分析 #

1. 内层循环里的{{...}}是无效语法，你应该直接用循环变量code来输出内容；
2. 虽然直接在v-for里写row.codes.split('+')能运行，但每次组件渲染都会重复执行split方法，性能上不够优雅，更推荐把逻辑抽离出来。

方案一：快速修正（直接在模板中处理） #

如果只是想快速实现功能，只需要把模板里的错误语法改掉就行：

<div id="app">
  <div v-for="(row, index) in list" :key="index">
    <p>{{ row.name }}</p>
    <!-- 修正：把{{...}}改成{{code}}，同时给v-for加key提升性能 -->
    <div v-for="(code, idx) in row.codes.split('+')" :key="idx">
      <p>{{ code }}</p>
    </div>
  </div>
</div>

<script>
var app = new Vue({ 
  el : "#app", 
  data : { 
    list : [ 
      { 'name' : 'aaa', 'codes' : '111+222+333' }, 
      { 'name' : 'bbb', 'codes' : '432+456+678' } 
    ] 
  } 
})
</script>

这个写法能直接生效，但要记得给每个v-for加上:key属性，这是Vue的最佳实践，能帮助框架更高效地更新DOM。

方案二：用计算属性预处理（推荐） #

为了避免模板里的冗余逻辑，同时提升性能，我们可以用计算属性把list转换成包含分割后数组的新数据结构，这样split只会执行一次（数据变化时才会重新计算）：

<div id="app">
  <div v-for="(row, index) in processedList" :key="index">
    <p>{{ row.name }}</p>
    <div v-for="(code, idx) in row.codesArray" :key="idx">
      <p>{{ code }}</p>
    </div>
  </div>
</div>

<script>
var app = new Vue({ 
  el : "#app", 
  data : { 
    list : [ 
      { 'name' : 'aaa', 'codes' : '111+222+333' }, 
      { 'name' : 'bbb', 'codes' : '432+456+678' } 
    ] 
  },
  computed: {
    processedList() {
      // 遍历原list，给每个item添加分割后的codesArray
      return this.list.map(item => ({
        ...item,
        codesArray: item.codes.split('+')
      }))
    }
  }
})
</script>

这个方案的优势在于：

• 模板更简洁，逻辑和视图分离；
• 计算属性会缓存结果，只有当原list变化时才会重新计算，性能更优；
• 后续如果需要对分割后的数组做其他处理，直接在计算属性里修改即可，维护性更好。

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