假设给定一个id = 301,查找出 list 中value = id的对象，并取出对应的label值。list 是一个嵌套的json数据，每一级都可能存在children属性，children中包含跟父级相同的数据结构，如果用嵌套for循环来实现，代码冗长不易阅读，而且性能也不好，所以我们选择使用递归算法来实现。用vue写出一段代码

好的，这是一段使用递归算法在Vue中查找嵌套的JSON数据的代码：

<template>
  <div>
    <p>Value: {{ value }}</p>
    <p>Label: {{ label }}</p>
  </div>
</template>

<script>
export default {
  name: "NestedJson",
  props: {
    list: {
      type: Object,
      required: true,
    },
    id: {
      type: Number,
      required: true,
    },
  },
  computed: {
    value() {
      return this.getNodeValue(this.list, this.id);
    },
    label() {
      return this.getNodeLabel(this.list, this.id);
    },
  },
  methods: {
    getNodeValue(node, id) {
      if (node.value === id) {
        return node.value;
      } else if (node.children) {
        for (let i = 0; i < node.children.length; i++) {
          const result = this.getNodeValue(node.children[i], id);
          if (result) {
            return result;
          }
        }
      }
    },
    getNodeLabel(node, id) {
      if (node.value === id) {
        return node.label;
      } else if (node.children) {
        for (let i = 0; i < node.children.length; i++) {
          const result = this.getNodeLabel(node.children[i], id);
          if (result) {
            return result;
          }
        }
      }
    },
  },
};
</script>

在这段代码中，我们定义了一个名为 "NestedJson" 的组件，并接受两个 props：list 和 id。list 是我们要查找的嵌套 JSON 数据，而id则是我们要找到的值。我们使用了两个计算属性来获取 value 和 label，它们分别调用了 getNodeValue 和 getNodeLabel 方法。

getNodeValue 和 getNodeLabel 方法都是使用递归算法来查找 JSON 数据的。它们接受一个节点和一个值作为参数，如果当前节点的 value 属性等于我们要查找的值，就返回该节点的 value 或 label 值。否则，它们将遍历当前节点的 children 属性，并递归调用自己来查找嵌套的节点。

在组件的模板中，我们简单地输出了 value 和 label 的值，以便我们可以在界面上看到它们的结果。