如何在Vue.js中竖向显示JS数组数据？

从现在开始，努力学习吧！本文《如何在Vue.js中竖向显示JS数组数据？》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

js 处理数组数据竖向显示

在 vue.js 中处理数组数据以实现竖向显示，需要对数组进行预处理。以下示例展示了如何处理数组 arr 并将其竖向显示：

let arr = [
  [{ price: 26, item_name: '测试1' }, { price: 269, item_name: '测试1' }, { price: 546, item_name: '测试1' }],
  [{ price: 75, item_name: '测试2' }, { price: 360, item_name: '测试2' }, { price: 648, item_name: '测试2' }, { price: 914, item_name: '测试2' }],
  [{ price: 142, item_name: '测试3' }, { price: 456, item_name: '测试3' }, { price: 685, item_name: '测试3' }]
];

// 处理数组
arr = arr.flat();

处理完成后，可以在 vue.js 中双重循环显示数据，如下：

<template>
  <div>
    <div v-for="i in arr" :key="i">
      <div>{{ i.item_name }}</div>
    </div>
  </div>
</template>

此时，数组中的数据将竖向显示。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~