vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

下面让我详细讲解“vue.js 双层嵌套for遍历的方法详解, 类似php foreach()”的完整攻略。

前言

在使用 Vue.js 时，经常需要做列表展示，而列表数据往往是嵌套的，比如订单列表，订单中包含多个商品，那么就需要双层嵌套 for 循环遍历。本文将详细介绍使用 Vue.js 双层嵌套 for 循环遍历的方法。

方法一：使用 v-for 指令嵌套

Vue.js 提供了 v-for 指令来遍历数组或对象，因此我们可以使用 v-for 指令来实现双层嵌套遍历。具体实现方法如下：

<template>
  <div>
    <div v-for="(order, index) in orderList" :key="index">
      <h3>订单号：{{ order.orderNo }}</h3>
      <div v-for="(item, i) in order.items" :key="i">
        <p>商品名称：{{ item.name }}</p>
        <p>商品价格：{{ item.price }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderList: [
        {
          orderNo: '001',
          items: [
            { name: '商品A', price: 10 },
            { name: '商品B', price: 20 }
          ]
        },
        {
          orderNo: '002',
          items: [
            { name: '商品C', price: 30 },
            { name: '商品D', price: 40 }
          ]
        }
      ]
    };
  }
};
</script>

在上面的示例中，我们使用两个 v-for 指令来实现双层嵌套遍历，外层循环遍历订单列表，内层循环遍历订单中的商品列表。

方法二：使用组件嵌套

除了 v-for 指令嵌套，我们还可以使用组件嵌套来实现双层嵌套遍历。具体实现方法如下：

<template>
  <div>
    <order-item v-for="(order, index) in orderList" :key="index" :order="order" />
  </div>
</template>

<script>
import OrderItem from './OrderItem.vue';

export default {
  components: {
    OrderItem
  },
  data() {
    return {
      orderList: [
        {
          orderNo: '001',
          items: [
            { name: '商品A', price: 10 },
            { name: '商品B', price: 20 }
          ]
        },
        {
          orderNo: '002',
          items: [
            { name: '商品C', price: 30 },
            { name: '商品D', price: 40 }
          ]
        }
      ]
    };
  }
};
</script>

在上面的示例中，我们定义了一个名为 OrderItem 的组件来展示订单信息和商品列表，然后在外层使用 v-for 指令遍历订单列表，内层使用组件嵌套展示订单和商品信息。

总结

本文详细介绍了使用 Vue.js 双层嵌套 for 循环遍历的方法，包括使用 v-for 指令嵌套和使用组件嵌套两种实现方式。这些方式都可以让我们更方便地展示嵌套数据。