vue2如何循环多维数组展示到页面上面

在Vue.js程序中，必要的步骤在于理解如何在你的模板中循环遍历和展示这个多维数组。

假设有一个二维数组，如：

data() {
  return {
    myArray: [
      ['item1', 'item2', 'item3'],
      ['itemA', 'itemB', 'itemC'],
      // ...
    ]
  }
}

 通过v-for指令，你可以按如下方式在页面上循环遍历这个二维数组：

<template>
  <div>
    <div v-for="(subArray, index) in myArray" :key="index">
      <div v-for="(item, subIndex) in subArray" :key="`sub-${subIndex}`">
        {{ item }}
      </div>
    </div>
  </div>
</template>

 

在这个例子中，外层的v-for用于遍历数组的每一个子数组，然后子数组的每一个项再被内部的v-for遍历，并显示在页面上。

对于更深的数组，只需相应地扩展这个模式，并在每一层都使用一个新的v-for。

PS：在Vue模板中使用v-for时，始终明确地提供一个键:key为每个项目。:key在遍历时能帮助vue区分不同的元素，为你的应用进行DOM操作的优化。