vue中拿到后台返回的数据渲染到页面上，为什么页面上的数据后面多了一个/

可能是因为你在渲染数据时，将数据中的斜杠（/）转义了，导致了多出来的 /。这种情况在处理 JSON 数据时比较常见，因为 JSON 中的字符串需要使用双引号包裹，而字符串中可能会包含斜杠等特殊字符。

解决方法可以在渲染数据时，将数据中的斜杠转义回来，使用 `v-html` 指令渲染 HTML 片段时，可以使用 `decodeURIComponent` 函数进行转义：

<div v-html="decodeURIComponent(item.content)"></div>

如果是使用 `v-text` 指令渲染文本内容，则需要使用正则表达式将斜杠进行转义：

<div v-text="item.content.replace(/\\\//g, '/')"></div>

其中，正则表达式 `/\\\//g` 表示查找所有的 `\/` 字符，使用 `/` 进行替换。

相关问题

vue2.0如何拿到后台数据后实现递归操作渲染树形数据

可以通过使用递归组件来渲染树形数据。首先，从后台获取数据，然后将数据传递给组件。组件内部通过递归调用自身来实现树形结构的渲染。

下面是一个示例代码：

<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      {{ item.name }}
      <tree :data="item.children" v-if="item.children && item.children.length > 0" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Tree',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  components: {
    Tree: {
      // 递归调用自身
      extends: this.$options.components.Tree,
      name: 'Tree',
      props: {
        data: {
          type: Array,
          default: () => []
        }
      }
    }
  }
}
</script>

在上面的代码中，我们创建了一个名为"Tree"的组件。该组件接收一个数据数组作为props，并通过递归调用自身来实现树形结构的渲染。

当数据中有children属性且children数组不为空时，当前节点就会渲染一个递归的子组件，并将子组件传递当前节点的children数组作为props。通过这样的方式，我们可以递归渲染整个树形结构的数据。

需要注意的是，递归渲染可以对性能产生一定的压力，所以我们需要对数据进行优化。例如，可以通过添加缓存来减少组件的创建次数，或者在后台对数据进行分页处理来降低数据量。

vue2.0如何拿到后台数据后实现递归操作渲染树形数据代码实现

很高兴能够为您解答问题。关于您的问题，可能需要更详细的信息以及您所使用的后台技术来进行更具体的回答。但是，我可以给您一些基础的思路和示例代码，帮助您理解树形数据的递归渲染过程。

基本思路：

1.从后台获取数据，并从根节点开始遍历，构造树形数据结构；

2.使用递归算法遍历树形数据结构，生成对应的 HTML 元素；

3.在 Vue 中使用 v-for 和 v-if 来动态渲染 HTML 元素。

以下是示例代码：

1.获取树形数据：

// 后台返回的数据格式
let data = [
  {
    id: 1,
    name: 'node1',
    children: [
      { id: 2, name: 'node2', children: [] },
      { id: 3, name: 'node3', children: [] },
    ],
  },
  {
    id: 4,
    name: 'node4',
    children: [
      {
        id: 5,
        name: 'node5',
        children: [
          { id: 6, name: 'node6', children: [] },
          { id: 7, name: 'node7', children: [] },
        ],
      },
      { id: 8, name: 'node8', children: [] },
    ],
  },
];

// 构造树形数据结构
function buildTree(data) {
  let tree = {};

  // 递归遍历数据
  function buildNode(item) {
    tree[item.id] = item;
    if (item.children.length > 0) {
      item.children.forEach((child) => {
        buildNode(child);
      });
    }
  }

  // 从根节点开始遍历
  data.forEach((item) => {
    buildNode(item);
  });

  return tree;
}

let treeData = buildTree(data);
console.log(treeData); // {1:{...}, 2:{...}, 3:{...}, 4:{...}, 5:{...}, 6:{...}, 7:{...}, 8:{...}}

2.递归遍历树形数据，生成 HTML：

<!-- Vue 模板 -->
<template>
  <div>
    <ul>
      <li v-for="(node, nodeId) in tree" :key="nodeId">
        <span>{{ node.name }}</span>
        <div v-if="node.children.length > 0">
          <tree :tree="node.children"></tree>
        </div>
      </li>
    </ul>
  </div>
</template>

<!-- Vue 组件 -->
<script>
export default {
  name: 'tree',
  props: {
    tree: {
      type: Array,
      default: () => [],
    },
  },
  components: { tree },
};
</script>

在上述代码中，我们通过递归调用自身组件（子组件）来生成 HTML。如果树形数据的 current node 没有 children，则不会创建子组件，而是直接将其作为叶节点渲染。如果节点有 children，则使用递归调用自身组件的方式来生成对应的 HTML 元素。

希望能够帮助您解决问题。如果您有其他问题或疑问，请随时向我提出！