vue html 递归

Vue 递归可以通过使用组件的递归调用来实现。例如，一个树形结构的数据可以通过递归组件来展示。下面是一个简单的例子：

假设有一个树形结构的数据，每个节点包含子节点和节点文本：

data: {
  treeData: [
    {
      text: 'Node 1',
      children: [
        {
          text: 'Child 1',
          children: []
        },
        {
          text: 'Child 2',
          children: [
            {
              text: 'Grandchild 1',
              children: []
            }
          ]
        }
      ]
    },
    {
      text: 'Node 2',
      children: []
    }
  ]
}

可以定义一个递归组件来展示这个树形结构：

<template id="tree-node">
  <li>
    {{ node.text }}
    <ul v-if="node.children.length">
      <tree-node v-for="child in node.children" :node="child"></tree-node>
    </ul>
  </li>
</template>

<tree-node :node="treeData"></tree-node>

在这个例子中，`tree-node` 组件接收一个 `node` 属性，表示当前节点的数据。如果这个节点有子节点，就在 `ul` 标签中递归调用 `tree-node` 组件。

需要注意的是，递归组件必须有一个结束条件，否则会进入无限递归。在这个例子中，结束条件是节点没有子节点。