How to implement recursive loop display of data in Vue

Vue is a popular JavaScript framework that is often used to build front-end applications. Vue has excellent performance and ease of use, which greatly improves development efficiency.

Loop display is one of the very common scenarios in Vue development. In actual development, we usually need to display some data with a hierarchical structure, such as a tree structure or a multi-level list. This requires the use of recursive loops to display data.

This article will introduce how to implement recursive loop display of data in Vue.

1. Building a data model

First, we need to define a data model and register it in the Vue instance.

Suppose we want to display a tree-structured data, which consists of the following fields:

• id: node ID
• name: node name
• children: list of child nodes

We can use recursion to define this data model:

const treeData = [
  {
    id: 1,
    name: '节点 1',
    children: [
      {
        id: 2,
        name: '节点 1-1',
        children: [
          {
            id: 3,
            name: '节点 1-1-1',
            children: []
          },
          {
            id: 4,
            name: '节点 1-1-2',
            children: []
          }
        ]
      },
      {
        id: 5,
        name: '节点 1-2',
        children: [
          {
            id: 6,
            name: '节点 1-2-1',
            children: []
          },
          {
            id: 7,
            name: '节点 1-2-2',
            children: []
          }
        ]
      }
    ]
  }
];

Vue.component('tree-node', {
  template: `
    <div>
      <div>{{ node.name }}</div>
      <tree-node v-for="child in node.children" :node="child" :key="child.id"></tree-node>
    </div>
  `,
  props: ['node'],
});

new Vue({
  el: '#app',
  data() {
    return {
      treeData: treeData,
    };
  },
});

In the above code, we use a file namedtree-node component to implement recursive loop display of data. This component will receive a prop named node, which represents the data object of the current node. In the component's template, we first display the name of the current node and then recursively display the child nodes.

Note: We use the v-for instruction to loop through the child nodes of the current node, which requires setting a unique key value for each child node. Here we use the id of the child node as the key.

2. Using recursive loops in templates

After the data model definition and component registration are completed, we can use recursive loops in Vue templates to display data.

Assuming that our data model has been registered as a component named tree-node, we can use the following code in the Vue template to display data:

<div id="app">
  <tree-node :node="treeData[0]"></tree-node>
</div>

In In the above code, we use the tree-node component and pass in the root node of the data model as prop.

In the above example, we show a tree-structured data. By using recursive loops and componentization, we can easily display hierarchical data.

3. Summary

Through the introduction of this article, I believe you have understood how to use recursive loops to display data in Vue. This is a very common scenario and is of great significance for developing practical applications. In actual development, we can also make more expansions and optimizations based on this to make the application more efficient and easier to use.

thanks for reading!

The above is the detailed content of How to implement recursive loop display of data in Vue. For more information, please follow other related articles on the PHP Chinese website!